webpack 学习笔记 （一）

webpack 作为当下前端前沿最受欢迎的打包工具，作为一个前端开发人员是很有必要去了解下它的。

    题外话： 

　　npm i -D 是 npm install  --save-dev的简写，是安装模块并保存到package.json的devDependencies

 安装webpack

　　npm i -D webpack (稳定版)

　　npm i -D webpack@<version>(指定版本号)

使用webpack命令行

　　在packjson.json

"scripts": {
    "build": "webpack src/main.js dist/bundle.js",  // 将指定文件打包到指定目录的文件
  }

然后就可以使用命令打包 npm run build

使用Loader

　　通常webpack的配置文件都会放在webpack.config.js文件中（这个是webpack会去默认读取的）

     基础内容：

const path = require('path');
module.exports = {
  // JavaScript 执行入口文件
  entry: './main.js',
  output: {
    // 将所有依赖的模块合并输出到一个bundle.js文件
    filename: 'bundle.js',
    // 将输出文件都放在dist目录下
    path: path.resolve(__dirname, './dist'),
  },
  module: {
    rules: [
    {
      // 用正在向嗯表达式去匹配要用该Loader转换的CSS文件
      test: /.css$/,
      use: ['style-loader', 'css-loader?minimize']   }
    ]
  }
};

 需要安装Loader npm i -D style-loader css-loader

解读

• use属性的值需要是一个由Loader名称组成的数组，Loader的执行顺兴是由后到前的
• 每个Loader都可以通过URL querstring 的方式来传入参数， 例如 css-loader?minimize中的minimize高祖css-loader要开启css压缩

使用Plugin

　　Plugin是用来扩展Webpack功能的，通过在构建流程里注入钩子实现，它为Webpack带来了很大的灵活性。

　配置方面： plugins属性是一个数组，里面的每一项都是插件的一个实例，在实例化一个组件时可以通过构造函数传入这个组件支持的配置属性。

使用DevServer

  作用：

• 提供HTTP服务而不是使用本地文件预览
• 监听文件的变化并自动刷新网页，做到实时预览
• 支持Source Map, 以方便调试

 安装： npm i  -D webpack-dev-server

启动配置：

"build": "webpack-dev-server --hot --devtool source-map"

当你启动的时候会看到这样一串日志：

　　Project is running at http://localhost:8081/

       webpack output is served from /

这意味着DevServer启动的HTTP服务器在8081端口，DevServer启动后会一直主流在后台保持运行，访问这个网址，就能获取项目根目录下的index.html

这时候还不会形成打包文件。

实施预览：

　　开启： webpack --watch

这样的话就会实施知道改动代码就会进行更新客户端的内容（这回刷新整个页面）

模块热替换：

　　开启： --hot

这样的话，代码更改只会实现局部刷新

支持Source Map

　　开启 --devtool source-map

总结：

• Entry: 入口， webpack执行创建的第一步将从Entry开始，可抽象成输入
• Module: 模块， 在Webpack里一切皆模块，一个模块对应一个文件。Webpack会从配置的Entry开始递归找出所有的依赖的模块
• Chunk: 代码块，一个Chunk由多个模块组合而成，用于代码合并与分割
• Loader: 模块加载器，用于经模块的原内容按照需求装换成新内容
• Plugin: 扩展插件， 在Webpack构建流程中的特定时机注入扩展逻辑，来改变构建结果或做我们想要的事情
• Output: 输出结果，在Webpack经过一系列处理并得出最终想要的代码后输出结果。