webpack

使用webpack前先要理解js模块化编程。
webpack官网
webpack中文文档

webpack是什么

webpack是模块化打包工具。用webpack可以自动分析模块的依赖关系，将所有用到的模块整合到一个js文件里。
用了webpack打包，可以减少浏览器请求数。
webpack能自动识别所有js的模块化规范，线下解决依赖问题，你不再需要requireJS这类工具。

webpack的安装

全局安装, webpack-cli 是命令行工具，在webpack 4.0之后和webpack本体分离

npm install webpack -g
npm install webpack-cli -g

本地安装

npm install webpack --save-dev
npm install webpack-cli --save-dev

推荐先全局安装，然后再项目目录下本地安装。
全局安装保证全局可以调用webpack。
nodejs的require只能获取到本地的webpack。所以本地也要装一份

webpack的使用

推荐使用方式二

//方式一  不使用配置文件
webpack ./src/index.js -o ./dist/bundle.js
//方式二 使用默认配置文件  默认是当前目录下的webpack.config.js 
webpack
//方式三 使用制定配置文件
webpack --config webpack.config.js

webpack配置文件

在项目根目录下新建一个webpack.config.js，然后在里面写配置
配置参考
最简单的配置文件

var path=require('path')

module.exports={
    mode:"development"，  //有development（开发）和production（产品，会压缩代码）  不写默认production
    entry:'./src/index.js',   //源文件的入口文件
    output:{
        filename:'bundle.js'    //输出文件
        path:path.resolve(__dirname,'./dist')  //输出目录
    },
}

webpack的loader

配置loader可以自动对单个文件进行加工
loader可以帮你引入css，转换ts到js，转换scss到css等。
有css-loader,style-loader,babel-loader,scss-loader等等很多。

用代码引入css文件

首先安装css-loader和style-loader

npm install css-loader --save-dev
npm install style-loader --save-dev

在配置文件里加入规则

var path=require('path')
module.exports={
    entry:'./src/index.js',
    output:{
        filename:'bundle.js'
        path:path.resolve(__dirname,'./dist')
    },
    module:{
        rules:[
            {
                test:/\.css$/,        //用正则表达式匹配到所有.css文件
                use:["style-loader","css-loader"],  //对.css文件用loader进行加工
            }
        ]
    }
}

然后你就可以用代码引入css了

require("./style.css")

webpack html模板

用html-webpack-plugin插件,可以把html也加入打包
安装

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

配置

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    //*******
    //中间其他配置省略
    //******
    plugins: [
      // 加入 html 模板任务
      new HtmlWebpackPlugin({
          // 模板文件
          template: 'src/index.html',
          // 打包后文件名称，会自动放到 output 指定的 dist 目录
          filename: 'index.html'
      })
    ]
}

把index.html中的script标签可以删掉了，打包时会自动添加

webpack自动化

每次修改文件后，我们需要在cmd里输入webpack,然后切换到浏览器去刷新页面。还是感觉有点繁琐。
这些工作可以自动完成。
我们需要用到webpack-dev-server

//全局安装本地开发服务器 
npm i webpack-dev-server -g
//运行  可以加--open表示立即自动打开浏览器
webpack-dev-server

用浏览器访问localhost:8080
每次你修改文件，点击保存后，系统会自动检测到，帮你编译，然后自动刷新浏览器页面。
webpack-dev-server自动编译后的代码是存放在内存中的。

其他插件

copy-webpack-plugin 把源文件目录的东西复制到输出文件目录，可以复制图片声音等
extract-text-webpack-plugin 分离css文件
clean-webpack-plugin 每次构建之前删掉dist目录，避免上一次构建的影响
min-css-extract-plugin分离css文件 代替extra-text-webpack-plugin 参考