The way to the font end:从认识webpack（3.x）开始

[JackWong992]

前端为什么需要webpack？

因为三大框架：react，vue，nodeJs都需要，所以需要；同时，webpack也是你从小白到工程师的跳跃。

什么是webpack？

webpack顾名思义，叫做模块打包机

安装webpack

1. 安装node（命令行输入node -v 出现版本号，确认安装成功）
2. npm install -g webpack （全局安装webpack，输入webpack -v确认安装成功） 注意：官方不推荐使用全局安装，可能别的部门版本不一致影响结果。 解决方法： 进入到你的webpack安装包>npm init>（可以输入，也可以不输入）>yes 这是会生成一个package.json的配置文件
3. 建立生产环境：npm install --save-dev webpack ps：如果安装的过程中较慢，可能是网速或者node版本不对。推荐使用淘宝镜像：cnpm.taobao.org 如果webpack版本过老或者依赖包过老： 1.删除node_modules 2. npm install --save-dev webpack 如果是老旧的文件，里面已经有依赖包：

4. package.json > "webpack: "xxx" 修改为最新版本 2. 删除node_modules 3. npm install (webpack更新，依赖包更新)

   开始一个简单的demo吧

   1.建立两个文件夹：src 和 dist，src主要是平时写代码，工作环境 dist主要是提交给组长的地方，生产环境

5. dist文件下，写一个模拟的文件：index.html，代码如下：

   <div id="title"></div>
   <script src="./bundle.js"></script>

   src文件夹下，写一个entery.js文件，具体代码如下：

   document.getElementById('title').innerHTML="hello world!";

   在终端输入：webpack src/entery.js dist/bundle.js 打开本地服务器：http-server -c-1 打开 > index.html文件：hello world 这里的bundle.js是一个生成文件，上述就是一个简单的webpack模拟的打包过程。

---

第二章：插件与配置

入口和出口

• 1. 配置文件webpack.config.js 的基本结构
• 2. entery选项（入口配置）
• 3. output选项（出口配置）
• 4. 多入口，多出口配置 根目录下新建webpack.config.js： 具体代码如下：

     const path=require('path');                                  //表示一个常量，不可以更改的。
     module.exports={
     entry:{
     entry:'./src/entry.js'                                   //出口文件，表示一个相对的路径
     },
     output:{
     path:path.resolve(_dirname,'dist'),             //node的语法，下面的路径表示一个绝对的路径
     filename:'bundle.js'
     },
     module:{},
     plugins:[],
     devServer:{}
     }

• entry：配置入口文件的地址，可以是单一入口，也可以是多入口
• output：配置出口文件的地址，支持多出口配置
• module：配置模块，主要解析CSS和图片转换压缩等功能
• plugins：配置插件，根据你需要配置不同功能的插件
• devServer：配置开发服务功能 entry主要是用于配置我们要压缩的JS文件，这里的路径是相对路径 output主要是用于出口文件，是为了告诉webpack最后的打包地址，文件名称。这里的路径用到了node 的语法，主要是绝对路径 当然如果你要配置多文件，只要进行以下配置即可： 在入口文件地址增加地址：entryTwo:'./src/xxx.js' 在出口处修改为：filename:'[name].js' 修改完成后在index.html引入文件地方修改即可，在终端输入webpack跑起来进行测试。

  服务和热更新

  devServer{
     //设置目录的基本结构
    contentBase: path.resolve(__dirname , ' dist ') ,
      //服务器的IP地址，可以使用IP也可以使用Localhost，IP的查询方法：终端->ipconfig->IPV4
     host:'localhost',
     //服务端压缩是否开启
     compress: true,
      //配置服务器端口号：可以随便设置
      port:10086
  }

  然后开始在终端安装webpack-server服务：npm install webpack-dev-server --save-dev 完成以后执行终端输入webpack-dev-server并不成功的，我们需要修改package.json配置文件: "script:{ "server": "webpack-dev-server" }" 这个时候热更新已经完成了。 在终端输入：npm run server在地址栏输入“localhost：xxx（port）” 我们随意修改entry的文件就会发现页面是自动刷新的。

  打包CSS文件

  Loaders是Webpack最重要的功能之一，他也是Webpack如此盛行的原因。通过使用不同的Loader，Webpack可以的脚本和工具，从而对不同的文件格式进行特定处理。 在src目录下新建一个文件夹：css>index.css

  body{
  background-color: red;
  color: white;
  }

  在src下的入口文件entry.js输入（这里写相对路径）：import css from './css/index.css' 这时候我们的猪脚style-loader和css-loader就要登场了： 终端安装: npm install style-loader --save-dev ->style-loader npm install css-loader --save-dev ->css-loader style-loader:主要是用来处理css中的url等 css-loader：主要是用来处理css中的style标签等 下载完成以后，配置webpack.config.js中的module属性：

  module:{
    rules: [{
         test: / \.css$ /,
         use:['style-loader' , 'css-loader']
      }]
      }

  ---

  打包JS

  JS的打包需要引入一个插件：uglify()插件 引入方式命名一个常量：const uglify=require(uglifyjs-webpack-plugin) 在webpack-config.js中的plugin中引入：plugins:[ new uglify( ) ] 这样一个JS文件就压缩完成了

---

打包压缩HTML文件

首先删除dist文件夹下的代码信息，这是用于生产环境。 在webpack-config.js文件下，引入html-webpack-plugin插件：const htmlPlugins= require('html-webpack-plugin'); 然后引入npm安装包：npm install --save-dev html-webpack-plugin 最后在webpack.config.js 里的plugin里进行插件配置：

new htmlPlugin({
    minify: {
        removeAttributeQuotes: true
   },
    hash: true,
    template: './src/index.html'
})

• minify：是对html文件进行压缩，removeAttrubuteQuotes是却掉属性的双引号。
• hash：为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS。
• template：是要打包的html模版路径和文件名称。

总结：html文件的打包可以有效的区分开发目录和生产目录，在webpack的配置中也要搞清楚哪些配置用于生产环境，哪些配置用于开发环境，避免两种环境的配置冲突。

---