码迷，mamicode.com
首页 > Web开发 > 详细

webpack开发案例（一）

时间：2017-12-21 21:44:23      阅读：239      评论：0      收藏：0      [点我收藏+]

标签：文件的   监听   图片   方便   node-sass   性能   变量   lin   save   

案例一（基本打包）

基本前置条件

技术分享图片

技术分享图片

步骤一：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <input type="text" id="v1" /> +
    <input type="text" id="v2" />
    <input type="button" id="bt" value="=" />
    <input type="text" id="res" />

    <script src="被打包的文件"></script>
  </body>
</html>

步骤二：

calc.js

// 1.0定义add方法
function add(x, y) {
  return x + y;
}

// 2.0导出add方法
module.exports = add;

步骤三：

main.js

// 1.0获取dom对象
var v1 = document.querySelector("#v1");
var v2 = document.querySelector("#v2");
var bt = document.querySelector("#bt");
var res = document.querySelector("#res");

bt.onclick = function() {
  // 2.0获取calc.js中的add方法并且调用结果
  var v1value = parseFloat(v1.value);
  var v2value = parseFloat(v2.value);

  // 3.0调用add方法
  var add = require(‘./calc.js‘);
  res.value = add(v1value, v2value);
}

步骤四：

技术分享图片

 

案例二（使用webpack.config.js配置）

基本前置条件

技术分享图片

技术分享图片

与案例一相比，index.htm（js文件引入路径要改变）、calc.js和main.js内容不变，仅仅只是多了个webpack.config.js配置文件，并且改变相关文件的路径

webpack.config.js

module.exports = {
  entry: ‘./src/main.js‘, //指定打包的入口文件
  output: {
    path: __dirname + ‘/dist‘, //输出路径
    filename: ‘build.js‘ //输出文件名
  }
}

这次打包方便了很多，直接输入webpack即可

技术分享图片

 

案例三（webpack中的loader）

步骤一：创建package.json文件

技术分享图片

步骤二：安装css-loader和style-loader到项目中，同时将其配置到package.json

技术分享图片

此时package.json文件的内容为

{
  "name": "vue",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "fengxiong",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.7",
    "style-loader": "^0.19.1"
  }
}

 步骤三：创建一个静态文件，存放css

技术分享图片

步骤四：配置好webpack.config.js和main.js文件

webpack.config.js

module.exports = {
  entry: ‘./src/main.js‘, //指定打包的入口文件
  output: {
    path: __dirname + ‘/dist‘, //输出路径
    filename: ‘build.js‘ //输出文件名
  },
  module: {
    loaders: [{
      test: /\.css$/,
      loader: ‘style-loader!css-loader‘
    }]
  }
}
main.js

// 1.0获取dom对象
var v1 = document.querySelector("#v1");
var v2 = document.querySelector("#v2");
var bt = document.querySelector("#bt");
var res = document.querySelector("#res");

//导入css文件
require(‘../static/css/site.css‘)

bt.onclick = function() {
  // 2.0获取calc.js中的add方法并且调用结果
  var v1value = parseFloat(v1.value);
  var v2value = parseFloat(v2.value);

  // 3.0调用add方法
  var add = require(‘./calc.js‘);
  res.value = add(v1value, v2value);
}

步骤五：使用命令打包、发布文件

技术分享图片

最终目录结构

技术分享图片

 

案例四（打包sass）

步骤一：安装nodesass

cnpm install node-sass sass-loader style-loader --save-dev

技术分享图片

步骤二：创建一个scss文件

技术分享图片

$color:blue;
#v2 {
    border: 1px solid $color;
}

步骤三：配置好webpack.config.js和main.js文件

webpack.config.js

module.exports = {
  entry: ‘./src/main.js‘, //指定打包的入口文件
  output: {
    path: __dirname + ‘/dist‘, //输出路径
    filename: ‘build.js‘ //输出文件名
  },
  module: {
    loaders: [{
      test: /\.css$/,  //打包.css文件
      loader: ‘style-loader!css-loader‘
    },
    {
      test: /\.scss$/,  //打包.scss文件
      loader: ‘style-loader!css-loader!sass-loader‘
    }]
  }
}
main.js

// 1.0获取dom对象
var v1 = document.querySelector("#v1");
var v2 = document.querySelector("#v2");
var bt = document.querySelector("#bt");
var res = document.querySelector("#res");

//导入css文件
require(‘../static/css/site.css‘);
//导入scss文件
require(‘../static/scss/site1.scss‘);

bt.onclick = function() {
  // 2.0获取calc.js中的add方法并且调用结果
  var v1value = parseFloat(v1.value);
  var v2value = parseFloat(v2.value);

  // 3.0调用add方法
  var add = require(‘./calc.js‘);
  res.value = add(v1value, v2value);
}

步骤四：使用命令打包、发布文件

技术分享图片

package.json文件内容为

{
  "name": "vue",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "fengxiong",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.7",
    "node-sass": "^4.7.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.1"
  }
}

 

案例五（打包less）

步骤一：安装less-loader

技术分享图片

步骤二：创建一个less文件

 技术分享图片

@color: green;
#res {
    border: 2px solid @color;
}

步骤三：配置好webpack.config.js和main.js文件

webpack.config.js

module.exports = {
  entry: ‘./src/main.js‘, //指定打包的入口文件
  output: {
    path: __dirname + ‘/dist‘, //输出路径
    filename: ‘build.js‘ //输出文件名
  },
  module: {
    loaders: [{
      test: /\.css$/,  //打包.css文件
      loader: ‘style-loader!css-loader‘
    },
    {
      test: /\.scss$/,  //打包.scss文件
      loader: ‘style-loader!css-loader!sass-loader‘
    },
    {
      test: /\.less$/,  //打包.less文件
      loader: ‘style-loader!css-loader!less-loader‘
    }]
  }
}
main.js

// 1.0获取dom对象
var v1 = document.querySelector("#v1");
var v2 = document.querySelector("#v2");
var bt = document.querySelector("#bt");
var res = document.querySelector("#res");

//导入css文件
require(‘../static/css/site.css‘);
//导入scss文件
require(‘../static/scss/site1.scss‘);
//导入less文件
require(‘../static/less/site2.less‘);

bt.onclick = function() {
  // 2.0获取calc.js中的add方法并且调用结果
  var v1value = parseFloat(v1.value);
  var v2value = parseFloat(v2.value);

  // 3.0调用add方法
  var add = require(‘./calc.js‘);
  res.value = add(v1value, v2value);
}

步骤四：使用命令打包、发布

技术分享图片

package.json文件内容

{
  "name": "vue",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "fengxiong",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.7",
    "less": "^2.7.3",
    "less-loader": "^4.0.5",
    "node-sass": "^4.7.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.1"
  }
}

 

案例六（打包其他资源）

步骤一：安装url-loader和file-loader

cnpm install url-loader file-loader --save-dev（需要在管理员权限下安装）

技术分享图片

步骤二：配置webpack.config.js文件

module.exports = {
  entry: ‘./src/main.js‘, //指定打包的入口文件
  output: {
    path: __dirname + ‘/dist‘, //输出路径
    filename: ‘build.js‘ //输出文件名
  },
  module: {
    loaders: [{
        test: /\.css$/, //打包.css文件
        loader: ‘style-loader!css-loader‘
      },
      {
        test: /\.scss$/, //打包.scss文件
        loader: ‘style-loader!css-loader!sass-loader‘
      },
      {
        test: /\.less$/, //打包.less文件
        loader: ‘style-loader!css-loader!less-loader‘
      },
      {
        //注意url可能请求多个资源，所以将来在项目中通过url导入的
        //资源必须配置在这里
        test: /\.(png|jpg|gif|ttf)$/, //打包url()请求的资源文件
        //如果图片很大的话，那么会造成build.js也比较大，加载的时候
        //导致效率低下。因此使用limit限制图片大小，当图片大小<40k，
        //则把它当做base64字符串存储到build.js中
        //否则单独将图片存放到磁盘上，将路径打包仅build.js中
        loader: ‘url-loader?limit=40000‘
      }
    ]
  }
}

步骤三：在html文件创建一个区域，在css、less或者scss中为那个区域添加一张图片

#v1 {
  border: 1px solid red;
}

#bg {
  width: 300px;
  height: 100px;
  background: url(../../img/bg.jpg);
}

步骤四：步骤四：使用命令打包、发布

 技术分享图片

 

案例七（实现实时更新热操作）

步骤一：安装服务cnpm install webpack webpack-dev-server html-webpack-plugin --save-dev

技术分享图片

步骤二：配置package.json

{
  "name": "vue",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
        "dev":"webpack-dev-server --inline --hot --open --port 5008"
  },
  "author": "fengxiong",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.6",
    "html-webpack-plugin": "^2.30.1",
    "less": "^2.7.3",
    "less-loader": "^4.0.5",
    "node-sass": "^4.7.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.1",
    "url-loader": "^0.6.2",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7"
  }
}

参数说明：
--inline 自动刷新
--hot 热加载
--port 指定监听端口
--open 自动在默认浏览器中打开
--host 可以指定服务器的if

步骤三：配置webpack.config.js文件

var htmlwp = require(‘html-webpack-plugin‘);

module.exports = {
  entry: ‘./src/main.js‘, //指定打包的入口文件
  output: {
    path: __dirname + ‘/dist‘, //输出路径
    filename: ‘build.js‘ //输出文件名
  },
  module: {
    loaders: [{
        test: /\.css$/, //打包.css文件
        loader: ‘style-loader!css-loader‘
      },
      {
        test: /\.scss$/, //打包.scss文件
        loader: ‘style-loader!css-loader!sass-loader‘
      },
      {
        test: /\.less$/, //打包.less文件
        loader: ‘style-loader!css-loader!less-loader‘
      },
      {
        //注意url可能请求多个资源，所以将来在项目中通过url导入的
        //资源必须配置在这里
        test: /\.(png|jpg|gif|ttf)$/, //打包url()请求的资源文件
        //如果图片很大的话，那么会造成build.js也比较大，加载的时候
        //导致效率低下。因此使用limit限制图片大小，当图片大小<40k，
        //则把它当做base64字符串存储到build.js中
        //否则单独将图片存放到磁盘上，将路径打包仅build.js中
        loader: ‘url-loader?limit=40000‘
      }
    ]
  },
  plugins: [
    new htmlwp({
      title: ‘首页‘, //生成页面标题
      filename: ‘index.html‘,
      template: ‘index.html‘
    })
  ]
}

步骤四：使用npm run dev运行项目

技术分享图片

 

案例八（实现es6转es5）

步骤一：安装四个包

babel-core

babel-loader

babel-preset-es2015

babel-plugin-transform-runtime：这个包主要是打包.vue组件页面中的es6语法需要

技术分享图片

步骤二：配置webpack.config.js文件

var htmlwp = require(‘html-webpack-plugin‘);

module.exports = {
  entry: ‘./src/main.js‘, //指定打包的入口文件
  output: {
    path: __dirname + ‘/dist‘, //输出路径
    filename: ‘build.js‘ //输出文件名
  },
  module: {
    loaders: [{
        test: /\.css$/, //打包.css文件
        loader: ‘style-loader!css-loader‘
      },
      {
        test: /\.scss$/, //打包.scss文件
        loader: ‘style-loader!css-loader!sass-loader‘
      },
      {
        test: /\.less$/, //打包.less文件
        loader: ‘style-loader!css-loader!less-loader‘
      },
      {
        //注意url可能请求多个资源，所以将来在项目中通过url导入的
        //资源必须配置在这里
        test: /\.(png|jpg|gif|ttf)$/, //打包url()请求的资源文件
        //如果图片很大的话，那么会造成build.js也比较大，加载的时候
        //导致效率低下。因此使用limit限制图片大小，当图片大小<40k，
        //则把它当做base64字符串存储到build.js中
        //否则单独将图片存放到磁盘上，将路径打包仅build.js中
        loader: ‘url-loader?limit=40000‘
      },
      {
        //将当前项目中所有的.js文件都要进行es6转es操作
        //node_modules除外
        test: /\.js$/, //打包.js文件
        loader: ‘babel-loader?presets[]=es2015‘,
        //node_modules中的所有.js文件不去转换，提高打包性能
        exclude: /node_modules/
      }
    ]
  },
  //babel: {
  //presets: [‘es2015‘], //配置将es6语法转换成es5语法
  //plugins: [‘transform-runtime‘] //为了解决打包.vue文件不报错
  //},
  plugins: [
    new htmlwp({
      title: ‘首页‘, //生成页面标题
      filename: ‘index.html‘,
      template: ‘index.html‘
    })
  ]
}

步骤三：改变main.js和calc.js的语法

main.js

// 1.0获取dom对象
var v1 = document.querySelector("#v1");
var v2 = document.querySelector("#v2");
var bt = document.querySelector("#bt");
var res = document.querySelector("#res");

//导入css文件
//require(‘../static/css/site.css‘);
//导入scss文件
//require(‘../static/scss/site1.scss‘);
//导入less文件
//require(‘../static/less/site2.less‘);

import ‘../static/css/site.css‘; //es6语法
import addObj from ‘./calc.js‘; //es6语法

bt.onclick = function() {
  // 2.0获取calc.js中的add方法并且调用结果
  var v1value = parseFloat(v1.value);
  var v2value = parseFloat(v2.value);

  // 3.0调用add方法
  //var add = require(‘./calc.js‘);
  res.value = addObj.add(v1value, v2value);
}
calc.js

// 1.0定义add方法
function add(x, y) {
  return x + y;
}

// 2.0导出add方法
//module.exports = add;

//es6语法
export default {
  add //es6语法，当属性名称和属性值变量同名的时候可以只写一个
}

步骤四：使用命令npm run dev运行项目

 技术分享图片

 

webpack开发案例（一）

标签：文件的   监听   图片   方便   node-sass   性能   变量   lin   save   

原文地址：http://www.cnblogs.com/fengxiongZz/p/8078381.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！