Webpack

作用

webpack前端自动化构建工具，实现资源的合并，打包，压缩，混淆等诸多功能
能够处理文件相互依赖关系
能够解决js兼容问题，把高级的，浏览器不识别的语法转换成高级浏览器可以识别的语法

安装

1. npm install webpack -g

2. npm install webpack-cli -g

简单使用

将main.js打包输出到dist目录

webpack ./src/main.js -o ./dist/bundle.js

index.html引用bundle.js即可使用

webpack-dev-server的使用

npm install webpack-dev-server -D

即--dev（生产）
包名会被注册在package.json的devDependencies里面，仅在开发环境下存在的包用-D，如babel，sass-loader这些解析器

2. webpack-dev-server工具，实现自动打包编译功能，和webpack用法一样

3. webpack-dev-server 帮我们打包的bundle.js文件，并没有放到实际的物理磁盘上，而是，直接托管到电脑的内存中，所以，我们在项目根目录中，无法找到这个文件的

   ####			webpack-dev-server配置命令

   1. 在package.json中加入，使用时npm run dev
      1. ![image-20200419153037801](http://qiniu.loveyu.wang/image-20200419153037801.png)
      2. --open 自动打开浏览器   --port 设置端口号  --contentBase src 设置src为默认启动 --hot热加载浏览器不刷新
   2. 第二种方式*了解*，**推荐第一种**
      1. ![image-20200419154226826](http://qiniu.loveyu.wang/image-20200419154226826.png)

   ### html-webpack-plugin

   - 作用：
     - 自动在内存中根据指定页面生成一个内存页面，自动引入bundle.js文件到页面中去

   1. 引入到webpack.config.js中

   2. ```js
      plugins: [
        new htmlWebpackPlugin({
         template: path.join(__dirname, "./src/index.html"),

css,less,scss使用

安装相关loader

const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: path.join(__dirname, "./src/main.js"),
  output: {
    path: path.join(__dirname, "./dist"),
    filename: "bundle.js",
  },
  module: {
    //这个节点，用于配置所有第三方模块加载器
    rules: [
      //配置css规则,从右到左调用
      { test: /\.css$/, use: ["style-loader", "css-loader"] },
      { test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] },
      { test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"] },
    ],
  },
  plugins: [
    new htmlWebpackPlugin({
      template: path.join(__dirname, "./src/index.html"),
      filename: "index.html",
    }),
  ],
};