webpack3学习笔记

时间  2019-11-09
标签 webpack3 webpack 学习 笔记 繁體版
原文   原文链接

地址：http://www.javashuo.com/article/p-vwjprlla-hd.htmljavascript

地址：https://www.chungold.com/my/course/32css

地址：http://jspang.com/2017/09/16/webpack3-2/html

代码：https://github.com/zhaobao1830/webpack前端

1、认识webpack和安装vue

    一、全局安装webpack  npm install -g webpack（官网推荐在项目中独立安装）java

     二、作项目的时候，不能全局安装，会出问题，须要在项目里面新建package.json，经过这个安装wenpack,，npm install --save-dev webpacknode

     备注：（1）全局安装webpack后，能够在cmd输入webpack -v查看版本号 （2）全局安装后，再项目中独立安装webpack的时候，无论package,json里webpack版本号是多少，都是全局安装的版本号 （3）没有全局安装webpack，在cmd输入webpack -v，会报webpack不是内部命令或外部命令react

            解决（3）的方案：jquery

            在package.json里面的scripts里面加 "build": "webpack这行代码就能够，在终端运行npm run build就至关于webpack，原理是npm run build就会去找node_modules下的webpackwebpack

            npm run build src/entery.js dist/bundel.js至关于 webpack  src/entery.js dist/bundel.js

1  "scripts": {
2     "test": "echo \"Error: no test specified\" && exit 1",
3     "build": "webpack"
4   },

         在本地项目中安装webpack如何查看版本（不能用webpack -v）：在node_modules里面找到webpack，打开package,json，找到"_id"，它对应的就是webpack的版本

         

         还有一个办法是：使用webpack打包项目，在打包时会显示webpack的版本号

          

     三、webpack安装失败的解决办法：查看网络、查看node 版本、查看权限

     四、webpack是干什么的？ 打包（把多个js文件打包成一个js文件）、转换（把sass、stylus、less等不标准的css转换成标准的css，jade转换成标准的js）、优化（如今的项目用到的东西好多，能够用webpack进行优化）

2、让你快速上手一个demo

     一、旧项目升级webpack有俩种方式：

          删除node_modules，运行npm install ---save-dev webpack；(这个是只有在新项目中，没有其余依赖模块的状况下使用)

          删除node_modules，在package.json里面，修改webpack的版本号，而后运行npm install（这是在老项目中，有不少依赖模块下使用）

      二、使用webpack打包文件： cmd运行webpack 要打包的文件 打包后保存的文件 

3、让你快速上手一个demo

      一、配置文件webpack.config.js的基本结构

      二、entry选项（入口配置）

      三、output选项（出口配置）

      四、多入口、多出口配置

    webpack.config.js

         

 1 const path=require('path');
 2 module.exports = {
 3   // 入口
 4   entry:{
 5     // 这个里面的entry和entry2是随便写的(多入口)
 6     entry: './src/entry.js',
 7     entry2:'./src/entry2.js'
 8   },
 9   // 出口
10   output:{
11     // 这是Node写法，表示的是绝对路劲
12     path:path.resolve(__dirname,'dist'),
13     // [name].js表示打包后的名字和打包前的一致（有几个入口文件，就打包成同名的几个出口文件）
14     // 这就是多出口
15     filename:'[name].js'
16   },
17   // 模块，打包的时候，js转换、图片压缩都在这个里面配置
18   module:{},
19   // 插件，须要的插件都在这里面配置
20   // 上面都是对象， 插件这个是数组，表示多个插件的意思
21   plugins:[],
22   // 配置开发时服务
23   devServer:{}
24 }

 

在src下新建entry.js和entry2.js

entry.js

1 document.getElementById("title").innerHTML = "testWebpack"

entry2.js

1 alert('tttt')

在根目录新建dist文件夹，建立Index.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div id="title"></div>
 9     <script src="entry.js"></script>
10     <script src="entry2.js"></script>
11 </body>
12 </html>

运行webpack，就会生成entry.js和entry2.js

 4、服务和热更新

    一、 webpack-config.js下的devServer

     

 1 const path=require('path');
 2 module.exports = {
 3   // 入口
 4   entry:{
 5     // 这个里面的entry和entry2是随便写的(多入口)
 6     entry: './src/entry.js',
 7     entry2:'./src/entry2.js'
 8   },
 9   // 出口
10   output:{
11     // 这是Node写法，表示的是绝对路径
12     path:path.resolve(__dirname,'dist'),
13     // [name].js表示打包后的名字和打包前的一致（有几个入口文件，就打包成同名的几个出口文件）
14     // 这就是多出口
15     filename:'[name].js'
16   },
17   // 模块，打包的时候，js转换、图片压缩都在这个里面配置
18   module:{},
19   // 插件，须要的插件都在这里面配置
20   // 上面都是对象， 插件这个是数组，表示多个插件的意思
21   plugins:[],
22   // 配置开发时服务
23   devServer:{
24     // 开发运行时监控的地方
25     contentBase:path.resolve(__dirname,'dist'),
26     // host不要填写localhost，由于系统、映射表被人修改后，会映射不到
27     // host: "本机IP地址"
28     host: "192.168.0.104",
29     // 是否启用服务器压缩
30     compress: true,
31     port: 1830,
32     proxy: {
33       '/api': {
34         target: 'http://localhost:3300',
35         pathRewrite: { '^/api': '' },
36         changeOrigin: true,
37         secure: false // 接受 运行在 https 上的服务
38       }
39     }
40   }
41 }

 

     上面devServer是配置一个服务器

     二、安装     npm install webpack-dev-server --save-dev

     三、package.json的配置  

   "scripts": {
     "server": "webpack-dev-server"
   },

      四、npm run server

       

 

       把这个在浏览器打开

       五、修改src下的js文件，页面内容会自动刷新(webpack3.6以上，自带热更新)

       备注：只有新版本的webpack才能够这样。若是不能热更新，查看webpack版本

5、打包css文件

       webpack在生产环境中有一个重要的做用就是减小http的请求数，就是把多个文件打包到一个JS里面，这样请求数量就能够减小好多。

      Loaders

          Loaders是Webpack最重要的功能之一，经过使用不一样的loader，webpack能够对不一样的文件格式进行处理

       

简单的举几个Loaders使用例子：

  • 能够把SASS文件的写法转换成CSS，而不在使用其余转换工具。
  • 能够把ES6或者ES7的代码，转换成大多浏览器兼容的JS代码。
  • 能够把React中的JSX转换成JavaScript代码。

注意：全部的Loaders都须要在npm中单独进行安装，并在webpack.config.js里进行配置。下面咱们对Loaders的配置型简单梳理一下。

  • test：用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的；
  • use：loader名称，就是你要使用模块的名称，这个选项也必须进行配置，不然报错；
  • include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不须要处理的文件（文件夹）（可选）；
  • query：为loaders提供额外的设置选项（可选）。

     打包css文件

       建立一个index.css文件

body{
  background-color: aqua;
}

    在entry.js里面引入index.css

// 路径必定要用相对路径，以防其余操做系统上不能用
import css from "./css/index.css";
document.getElementById("title").innerHTML = "hell zys";

     解析css文件须要的俩个loader：style-loader（处理css里面的url路径问题）和css-loader（讲css插入到页面的style里）

     先使用npm进行安装  npm install style-loader --save-dev和npm install css-loader --save-dev

     安装好一会，就须要在webpack.base.js下进行配置

     

1   // 模块，打包的时候，js转换、图片压缩都在这个里面配置
2   module:{
3     rules:[
4       {
5         test:/\.css$/,
6         (这出也可使用use，我看现成的项目，这块都用的是Loader)loader: ['style-loader','css-loader']
          或者是 use:[{loader:"style-loader"},{loader:"css-loader"}]
7       }
8     ]
9   },

 

loader的三种写法

       第一种写法：直接用use

1 module:{
2         rules:[
3             {
4                 test:/\.css$/,
5                 use:['style-loader','css-loader']
6             }
7         ]
8     },

      第二种写法：把use变成loader

1 module:{
2         rules:[
3             {
4                 test:/\.css$/,
5                 loader:['style-loader','css-loader']
6             }
7         ]
8     },

      第三种写法：use+loader

 1  module:{
 2         rules:[
 3             {
 4                 test:/\.css$/,
 5                 use: [
 6                     {
 7                         loader: "style-loader"
 8                     }, {
 9                         loader: "css-loader"
10                     }
11                 ]
12             }
13         ]
14     },

  6、插件配置：配置JS压缩

       js压缩须要在plugins里面进行配置，须要的插件是uglifyjs-webpack-plugin

      webpack.config.js

1 const uglify = require('uglifyjs-webpack-plugin');
2 
3   plugins:[
4     new uglify()
5   ],

     备注：若是在终端执行webpack，js代码是能够正常压缩的；若是在终端执行npm run server，会报错

     

     缘由是devServer和js压缩发生冲突

     解释：

     开发环境中是基本不会对js进行压缩的，在开发预览时咱们须要明确的报错行数和错误信息，因此彻底没有必要压缩JavasScript代码。而生产环境中才会压缩JS代码，用于加快程序的工做效率。devServer用于开发环境，而压缩JS用于生产环境，在开发环境中做生产环境的事情因此Webpack设置了冲突报错。

     在实际开发中，webpack配置文件是分开的，开发环境一个文件，生产环境一个文件。

7、插件配置：HTML文件的发布

       配置webpack.config.js文件，先引入咱们的html-webpack-plugin插件

       

const htmlPlugin= require('html-webpack-plugin');

   引入后使用npm进行安装包：

    npm install --save-dev html-webpack-plugin

    最后在webpack.config.js里的plugins里进行插件配置，配置代码以下。

    

1        new htmlPlugin({
2             minify:{
3                 removeAttributeQuotes:true
4             },
5             hash:true,
6             template:'./src/index.html'
7            
8         })
  • minify：是对html文件进行压缩，removeAttrubuteQuotes是却掉属性的双引号。
  • hash：为了开发中js有缓存效果，因此加入hash，这样能够有效避免缓存JS。
  • template：是要打包的html模版路径和文件名称。

8、css中引入图片

      代码：

      css： 

1 #tupian{
2   background-image: url("../images/1.jpg");
3   width: 100px;
4   height: 100px;
5 }

      index.html

1    <div id=tupian></div>
2    <div id=title></div>

webpack.config.js

    

 1  rules:[
 2       {
 3         test:/\.css$/,
 4         use: ["style-loader", "css-loader"]
 5       },
 6       {
 7         test:/\.(png|jpg|gif)/ ,
 8         use:[{
 9           loader:'url-loader',
10           options:{
11             limit:500000
12           }
13         }]
14       }
15     ]
  • test:/\.(png|jpg|gif)/是匹配图片文件后缀名称。
  • use：是指定使用的loader和loader的配置参数。
  • limit：是把小于500000B的文件打成Base64的格式，写入JS。

在css里引入图片，要打包成功，须要俩个Loader：url-loader和file-loader

   npm install --save-dev url-loader file-loader

file-loader：解决引用路径的问题，拿background样式用url引入背景图来讲，咱们都知道，webpack最终会将各个模块打包成一个文件，所以咱们样式中的url路径是相对入口html页面的，而不是相对于原始css文件所在的路径的。这就会致使图片引入失败。这个问题是用file-loader解决的，file-loader能够解析项目中的url引入（不只限于css），根据咱们的配置，将图片拷贝到相应的路径，再根据咱们的配置，修改打包后文件引用路径，使之指向正确的文件。

url-loader：若是图片较多，会发不少http请求，会下降页面性能。这个问题能够经过url-loader解决。url-loader会将引入的图片编码，生成dataURl。至关于把图片数据翻译成一串字符。再把这串字符打包到文件中，最终只须要引入这个文件就能访问图片了。固然，若是图片较大，编码会消耗性能。所以url-loader提供了一个limit参数，小于limit字节的文件会被转为DataURl，大于limit的还会使用file-loader进行copy。

 

9、css分离和publicPath

   在简单项目中，js代码会不多，css代码不少，这时打包的时候须要把css代码分离出来（webpack不支持这种行为）

  可使用extract-text-webpack-plugin

   安装 npm install --save -dev extract-text-webpack-plugin

   webpack.config.js引入   

1 const extractTextPlugin = require("extract-text-webpack-plugin");

在plugins中配置

1 new extractTextPlugin("/css/index.css")

修改rules里面css部分

1     {
2         test: /\.css$/,
3         use: extractTextPlugin.extract({
4           fallback: "style-loader",
5           use: "css-loader"
6         })
7       },

这样就能够运行webpack打包了

可是打包后有个问题，css路径不正确

解决办法：

publicPath：是在webpack.config.js文件的output选项中，主要做用就是处理静态文件路径的。

webpack.config.js 声明一个对象，叫website。

1 var website ={
2   publicPath:"http://192.168.0.103:1717/"   ip是本机的ip地址  端口号是devServer里配置的端口
3 }

修改output

1   output:{
2     path:path.resolve(__dirname,'dist'),
3     filename:'[name].js',
4     publicPath:website.publicPath
5   },

运行webpack打包后，相对路径变成了绝对路径

 

10、html图片打包

    示例：

    在html页面引入ing 图片，打包后没有成功

    

<div><img src="images/2.jpg"></div>

 解决办法：

npm install --save-dev html-withimg-loader

webpack.config.js

1 {
2     test: /\.(htm|html)$/i,
3      use:[ 'html-withimg-loader'] 
4 }

这样就能够打包了

 11、打包Less文件

      先安装Less  

npm install --save-dev less

    安装less-loader  

npm install --save-dev less-loader

    loader配置webpack.config.js

    

 1 {
 2     test: /\.less$/,
 3     use: [{
 4            loader: "style-loader" // creates style nodes from JS strings
 5         }, {
 6             loader: "css-loader" // translates CSS into CommonJS
 7         , {
 8             loader: "less-loader" // compiles Less to CSS
 9         }]
10 }

建立一个less文件

1 @base:#000;
2 #tLess{
3   width:300px;
4   height:300px;
5   background-color:@base;
6 }

entry.js

1 // 路径必定要用相对路径，以防其余操做系统上不能用
2 import css from './css/index.css';
3 import less from './css/black.less';
4 document.getElementById("title").innerHTML = "hell zys";

这时就能够打包了（这时打包，less是在js里面）

  如何把less打包的时候分离出来

webpack.config.js

 1  {
 2         test: /\.less$/,
 3         use: extractTextPlugin.extract({
 4           use: [{
 5             loader: "css-loader"
 6           }, {
 7             loader: "less-loader"
 8           }],
 9           // use style-loader in development
10           fallback: "style-loader"
11         })
12       }

备注：如何在运行 npm run server的时候自动打开页面

在package.ison里面，scripts里的server里，最后面加一个--open

1     "server": "webpack-dev-server --open"

 十三 、使用postcss自动给css加前缀

     安装： postcss-loader和autoprefixer（自动添加前缀）

    

1 npm install --save-dev postcss-loader autoprefixer

    在根目录下建立 postcss.config.js（用来配置postcss属性）

    

1 module.exports={
2   plugins:[
3     require('autoprefixer')
4   ]
5 }

 webpack.config.js

    css部分进行配置

1 {
2         test: /\.css$/,
3         use: extractTextPlugin.extract({
4           fallback: "style-loader",
5           use: [{loader:"css-loader",options:{importLoaders:1}},'postcss-loader']  //使用{}是为了能够加参数options
6  }) 7 },

例子：

1 #tupian{
2   background-image: url("../images/1.jpg");
3   width: 100px;
4   height: 100px;
5   transform: rotate(7deg);
6 }

    打包后

    

1 #tupian{
2   background-image: url(http://192.168.0.102:1717/images/b3422d7fb5ba566d1cb9e81efb0e9d7e.jpg);
3   width: 100px;
4   height: 100px;
5   -webkit-transform: rotate(7deg);
6           transform: rotate(7deg);
7 }

 十4、使用purifycss-webpack消除未使用的css

   咱们在项目中会引入bootstrap框架，有些css不会用到；随着项目的复杂，有些css咱们没有使用并且没有删除，打包的时候会把这些都打包进去

  安装插件

   

npm i -D purifycss-webpack purify-css

   在webpack.config.js里

    由于咱们须要同步检查html模板，因此咱们须要引入node的glob对象使用，引入glob

    

const glob = require('glob');

引入purifycss-webpack

1 const PurifyCSSPlugin = require("purifycss-webpack");

  plugins配置

   

1 new extractTextPlugin("css/index.css"),
2 new PurifyCSSPlugin({
3     paths: glob.sync(path.join(__dirname, 'src/*.html'))
4 })

这里配置了一个paths，主要是需找html模板，purifycss根据这个配置会遍历你的文件，查找哪些css被使用了。

注意：这个插件必定要有extractTextPlugin配合

使用了上面的操做后，咱们在打包的时候，就会把一些咱们没有用到的css在打包中清除，减小打包后的大小

例子：

1 #tupian{
2   background-image: url("../images/1.jpg");
3   width: 100px;
4   height: 100px;
5   transform: rotate(7deg);
6 }
7 .tt{
8   color: #bbbbbb;
9 }

 上面的tt没有使用

打包后：

1 #tLess {
2   width: 300px;
3   height: 300px;
4   background-color: #000;
5 }

 

十5、使用babel编译es六、es七、es8

      在前端开发中都开始使用ES6的语法了，虽说webpack3增长了一些ES6的转换支持，可是实际效果不是很好，没发挥出真正的功能。因此在开发中仍是喜欢添加Babel-loade   

     Babel是什么？

    Babel实际上是一个编译JavaScript的平台，它的强大之处表如今能够经过便宜帮你达到如下目的：

  • 使用下一代的javaScript代码(ES6,ES7….)，即便这些标准目前并未被当前的浏览器彻底支持。
  • 使用基于JavaScript进行了扩展的语言，好比React的JSX。

     

     Babel的安装与配置

     Babel实际上是几个模块化的包，其核心功能位于称为babel-core的npm包中，webpack能够把其不一样的包整合在一块儿使用，对于每个你须要的功能或拓展，你都须要安装单独的包（用得最多的是解析ES6的babel-preset-es2015包和解析JSX的babel-preset-react包）。

     

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

在webpack中配置Babel的方法以下：

   

 1 {
 2     test:/\.(jsx|js)$/,
 3     use:{
 4         loader:'babel-loader',
 5         options:{
 6             presets:[
 7                 "es2015","react"
 8             ]
 9         }
10     },
11     exclude:/node_modules/
12 }

 测试：修改entry.js

1 import css from './css/index.css';
2 {
3     let jspangString = 'Hello Webpack'
4     document.getElementById('title').innerHTML=jspangString; 
5 }

上面的代码使用了ES6的let声明方法。若是你不使用Babel来进行转换，你会发现打包出来的js代码没有做兼容处理，使用了Babel转换的代码是进行处理过的。

 

.babelrc配置

虽然Babel能够直接在webpack.config.js中进行配置，可是考虑到babel具备很是多的配置选项，若是卸载webapck.config.js中会很是的雍长不可阅读，因此咱们常常把配置卸载.babelrc文件里。

在项目根目录新建.babelrc文件，并把配置写到文件里。

.babelrc

{
    "presets":["react","es2015"]
}

.webpack.config.js里的loader配置

1 {
2     test:/\.(jsx|js)$/,
3     use:{
4         loader:'babel-loader',
5     },
6     exclude:/node_modules/
7 }

ENV：

如今网络上已经不流行babel-preset-es2015，如今官方推荐使用的是babel-preset-env,那咱们为了紧跟潮流，咱们在讲一下env的配置方法。

首先须要下载：

 

npm install --save-dev babel-preset-env

而后修改.babelrc里的配置文件。其实只要把以前的es2015换成env就能够了。

{
  "presets": [“react”,"env"]
}

总结：在实际工做中仍是要安装Babel的，这样能更好的兼容每种浏览器，而把Babel的配置文件分解出来是最好的选择。

第16节：打包后如何调试

做为一个程序员天天的大部分工做就是调试本身写的程序，那咱们使用了webpack后，因此代码都打包到了一块儿，给调试带来了麻烦，可是webpack已经为咱们充分考虑好了这点，它支持生产Source Maps来方便咱们的调试。

在使用webpack时只要经过简单的devtool配置，webapck就会自动给咱们生产source maps 文件，map文件是一种对应编译文件和源文件的方法，让咱们调试起来更简单。

四种选项

在配置devtool时，webpack给咱们提供了四种选项。

  • source-map:在一个单独文件中产生一个完整且功能彻底的文件。这个文件具备最好的source map,可是它会减慢打包速度；
  • cheap-module-source-map:在一个单独的文件中产生一个不带列映射的map，不带列映射提升了打包速度，可是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号）,会对调试形成不便。
  •  eval-source-map:使用eval打包源文件模块，在同一个文件中生产干净的完整版的sourcemap，可是对打包后输出的JS文件的执行具备性能和安全的隐患。在开发阶段这是一个很是好的选项，在生产阶段则必定要不开启这个选项。
  • cheap-module-eval-source-map:这是在打包文件时最快的生产source map的方法，生产的 Source map 会和打包后的JavaScript文件同行显示，没有影射列，和eval-source-map选项具备类似的缺点。

四种打包模式，有上到下打包速度愈来愈快，不过同时也具备愈来愈多的负面做用，较快的打包速度的后果就是对执行和调试有必定的影响。

我的意见是，若是大型项目可使用source-map，若是是中小型项目使用eval-source-map就彻底能够应对，须要强调说明的是，source map只适用于开发阶段，上线前记得修改这些调试设置。

简单的配置：

1 module.exports = {
2   devtool: 'eval-source-map',
3   entry:  __dirname + "/app/main.js",
4   output: {
5     path: __dirname + "/public",
6     filename: "bundle.js"
7   }
8 }
9

总结：调试在开发中也是必不可少的，可是必定要记得在上线前必定要修改webpack配置，再打出上线包。

 

十7、开发环境和生产环境并行

       

修改package.json命令

其实就是添加一个dev设置，并经过环境变量来进行区分，下面是package.json里的值。

1 "scripts": {
2     "server": "webpack-dev-server --open",
3     "dev":"set type=dev&webapck",
4     "build": "set type=build&webpack"
5   },

修改webpack.config.js文件

能够利用node的语法来读取type的值，而后根据type的值用if–else判断。

1 if(process.env.type== "build"){
2     var website={
3         publicPath:"http://192.168.0.104:1717/"
4     }
5 }else{
6     var website={
7         publicPath:"http://cdn.jspang.com/"
8     }
9 }

若是想看传过来的是什么值，可使用下面的代码

console.log( encodeURIComponent(process.env.type) );

Mac下的package.json设置

MAC电脑下须要把set换成export，而且要多加一个&符，具体代码以下。

1  "scripts": {
2     "server": "webpack-dev-server --open",
3     "dev":"export type=dev&&webpack",
4     "build": "export type=build&&webpack"
5   },

 

十8、webpack模块化配置

    js中的模块化

    建立一个zb.js

1 function zb() {
2   console.log('zb')
3 }
4 module.exports = zb

entry.js引入

1 import zb from 'zb.js'
2 
3 zb()

    

 webpack中的模块化

      entry-webpack.js   

1 //声明entry变量
2 const entry ={};
3 //声明路径属性
4 entry.path={
5   entry:'./src/entry.js'
6 }
7 //进行模块化
8 module.exports =entry;

      webpack.config.js引入（注意：这里面引入不能用import，要用require） 

const entry = require("./webpack_config/entry_webpack.js");

    十9、引入第三方类库

npm install --save jquery

页面中引入：

import $ from 'jquery

全局引入：

  ProvidePlugin是一个webpack自带的插件，Provide的意思就是装备、提供。由于ProvidePlugin是webpack自带的插件，因此要先再webpack.config.js中引入webpack。

const webpack = require('webpack');

引入成功后配置咱们的plugins模块，代码以下：

1 plugins:[
2     new webpack.ProvidePlugin({
3         $:"jquery"
4     })
5 ],

配置好后，就能够在你的入口文件中使用了，而不用再次引入了。这是一种全局的引入，在实际工做中也能够很好的规范项目所使用的第三方库。

 

二10、watch的正确用法（没有用过）

  在初级开发阶段，使用webpack-dev-server就能够充当服务器和完成打包任务，但时随着你项目的进一步完成，可能须要先后台联调或者两个前端合并代码时，就须要一个公共的服务器了。这时候咱们每次保存后手动打包显然效率过低，咱们但愿的场景是代码发生变化后，只要保存，webpack自动为咱们进行打包。这个工具就是watch

watch的配置

   webpack.config.js最下面

  

1 watchOptions:{
2     //检测修改的时间，以毫秒为单位
3     poll:1000, 
4     //防止重复保存而发生重复编译错误。这里设置的500是半秒内重复保存，不进行打包操做
5     aggregeateTimeout:500, 
6     //不监听的目录
7     ignored:/node_modules/, 
8 }

配置好后，咱们就能够痛快的使用watch了，在大型项目中，这大大加快了咱们的开发效率，不用反复的手动打包了。

BannerPlugin插件

工做中每一个人写的代码都要写上备注，为的就是在发生问题时能够找到当时写代码的人。有时候也用于版权声明。

这个插件就是BannerPlugin，咱们使用后会在JS中加上咱们的版权或开发者声明。

new webpack.BannerPlugin('1830')

须要注意的是在使用这个插件以前必须引入webpack

const webpack = require('webpack');

这时在dist目录下的entery.js已经加上了版权声明。

二11、webpack优化之抽离第三方组件库

   在项目中，咱们会引入多个第三方组件库（如：jquery），打包之后，会所有打包进入口文件，使得入口文件太大，这时候就须要把第三方组件剥离出来单独打包

ProvidePlugin和import

在第19节中学习了如何引入第三方类库，并引入了jquery，在引用JQuery时咱们用了两种方法，第一种时import，第二种时使用ProvidePlugin插件。那两种引入方法有什么区别那?

  • import引入方法：引用后无论你在代码中使用不适用该类库，都会把该类库打包起来，这样有时就会让代码产生冗余。
  • ProvidePlugin引入方法：引用后只有在类库使用时，才按需进行打包，因此建议在工做使用插件的方式进行引入。

具体的对比操做，会在视频中演示，你会看出两种引入方法的对比打包结果。差距仍是蛮大的。

抽离JQuery

上边的方法只是优化的第一步，工做中你会发现，不适用的类库几乎咱们也不会引入，因此上边只是一个必要操做的第一步。那每每把第三方类库抽离出来，才是最好的解决方法。

第一步：修改入口文件

抽离的第一步是修改入口文件，把咱们的JQuery也加入到入口文件中，看下面的代码。

webpack.config.js

1 entry:{
2         entry:'./src/entry.js',
3         jquery:'jquery'
4  },

第二步：引入插件

咱们须要引入optimize优化插件，插件里边是须要配置的，具体配置项看下面的代码。

1 new webpack.optimize.CommonsChunkPlugin({
2     //name对应入口文件中的名字，咱们起的是jQuery
3     name:'jquery',
4     //把文件打包到哪里，是一个路径
5     filename:"assets/js/jquery.min.js",
6     //最小打包的文件模块数，这里直接写2就好
7     minChunks:2
8 }),

minChunks通常都是固定配置，可是不写是不行的，你会打包失败。

filename是能够省略的，这是直接打包到了打包根目录下，咱们这里直接打包到了dist文件夹下边。

配置完成后，咱们能够先删掉之前打包的dist目录，而后用webpack再次打包，你会发现jquery被抽离了出来，而且咱们的entry.js文件变的很小。

多个第三方类库抽离

会了如何抽离Jquery，可是在实际开发中，咱们会引用不止一个第三方类库，这时也须要抽离。咱们拿引入Vue为例，看看如何抽离出来。

第一步:咱们先用npm 进行安装。

npm instawll vue --save

第二步：在入口配置中引入vue和jquery

1 entry:{
2     entry:'./src/entry.js',
3     jquery:'jquery',
4     vue:'vue'
5 },

第三步：修改CommonsChunkPlugin配置

须要修改两个位置：

  • 第一个是在name属性里把原来的字符串改成数组，由于咱们要引入多个模块，因此是数组；
  • 第二个是在filename属性中把咱们输出的文件名改成匹配付[name],这项操做就是打包出来的名字跟随咱们打包前的模块。

下面是咱们修改的代码，你能够跟jquery抽离时对比一下。

1 new webpack.optimize.CommonsChunkPlugin({
2     //name对应入口文件中的名字，咱们起的是jQuery
3     name:['jquery','vue'],
4     //把文件打包到哪里，是一个路径
5     filename:"assets/js/[name].js",
6     //最小打包的文件模块数，这里直接写2就好
7     minChunks:2
8 }),

配置好后，咱们就能够在控制台输入webpack进行打包了。你会看到咱们预想的结果，jquery和vue都被咱们抽离出来了。

总结：在项目开发中，咱们很使用不少第三方类库，那好的作法就是把第三方这些类库所有抽离处理，这样在项目维护和性能上都是不错的选择。

 

二12、静态资源打包输出

   工做中会有一些已经存在但在项目中没有引用的图片资源或者其余静态资源（好比设计图、开发文档），这些静态资源有多是文档，也有多是一些额外的图片。项目组长会要求你打包时保留这些静态资源，直接打包到制定文件夹。其实打包这些资源只须要用到copy-webpack-plugin。

使用copy-webpack-plugin

copy-webpack-plugin就是专门为咱们做静态资源转移的插件，不过它不一样上两节使用的插件，它是须要安装的。

插件安装   

npm install --save-dev copy-webpack-plugin

引入插件

安装好后，须要在webpack.config.js文件的头部引入这个插件才可使用。

const copyWebpackPlugin= require("copy-webpack-plugin");

配置插件

引入以后咱们就能够在plugins里边进行配置插件了

1 new copyWebpackPlugin([{
2         from:__dirname+'/src/public',
3         to:'./public'
4 }])
  • from:要打包的静态资源目录地址，这里的__dirname是指项目目录下，是node的一种语法，能够直接定位到本机的项目目录中。
  • to:要打包到的文件夹路径，跟随output配置中的目录。因此不须要再本身加__dirname。

配置好后，咱们就可使用webpack 进行打包了，你会发现图片按照咱们的配置打包了过去。

 

二十3、Json配置文件使用

   在实际工做中，咱们的项目都会配置一个Json的文件或者说API文件，做为项目的配置文件。有时候你也会从后台读取到一个json的文件，这节课就学习如何在webpack环境中使用Json。若是你会webpack1或者webpack2版本中，你是须要加载一个json-loader的loader进来的，可是在webpack3.x版本中，你再也不须要另外引入了。

读出Json内容

第一步：如今咱们的index.html模板中加入一个层，并给层一个Id，为了是在javascript代码中能够方便引用。

<div id="json"></div>

第二步：到src文件夹下，找到入口文件，我这里是entry.js文件。修改里边的代码，以下：

1 var json =require('../config.json');
2 document.getElementById("json").innerHTML= json.name;

这两行代码很是简单，第一行是引入咱们的json文件，第二行驶写入到到DOM中。

 

小技巧：

一、npm run dev之后自动打开浏览器，config里的index.js，dev里面的autoOpenBrowser设置为true

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程