Webpack 静态打包器 天生支持ES6

指定一个入口文件 webpack会自动解析模块 整体打包成一个.js文件

1基本用法
(1)npm init -y //初始化packge.json文件
script里添加命令
"build":"webpack"
"dev":"webpack-dev-server"

(2)《dist...index.html》《src...index.js》 //创建目录dist 和src index.html 和 main.js
(3)编写src...下的main.js文件

(4)npm install webpack --save-dev //安装webpack
(5)npm install webpack-cli --save-dev //webpack4.0版本后的要安装 cli脚手架
(6)跟目录创建webpack.config.js文件 && 编写 const path = require('path')

(5)npm install lodash --save //安装lodash
(8)npx webpack 执行打包
(9)index.html文件内添加要引入的文件 <script src="./main.js"></script>

2、Webpack 的写法

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const uglify = require('uglifyjs-webpack-plugin')

split 动态模块加载 就是import * from './abc.js'

module.exports = {
mode: "production", //development 开发模式 || production 产品模式 打包后会压缩 优化
entry: './src/index.js', //入口 可以是[对象 函数 promise string]
devtool: "source-map",

output: {               //出口
    filename: '[chunkhash:3]_[name].js',    //导出文件名 哈希3位 + 传入的名字
    path: path.resolve(__dirname,'dist'),   //导出地址 是绝对路径
    publicPath: "/output/dist/",        //异步加载的东西都需要手动设定publicPath
    library: 'MyLibrary',           //包规范格式 umd兼容
    libraryTarget: "umd"
},

resolve: {                  //处理
    alias: {                //别名
        test:path.resolve(__dirname,'test/test.js')
    }
},

module: {                   //模块
    noParse:/jquery/,           //不进行处理的模块 或者叫文件
    rules: [                //规则
        {
            test: /\.(sc|c|sa)ss$/,         //正则表达式匹配 当引入的模块后缀是css时做下面的事
            use: [                  //用这几个规则处理 从最后的往前处理
                MiniCssExtractPlugin.loader,{   //MiniCssExtractPlugin 抽取css文件 需要配合 plugins
                    loader:'css-loader',
                    options: {          //options 个性化 loader 的行为
                        sourceMap: true
                    }
                },{
                    loader: 'postcss-loader',
                    options:{           //options 个性化 loader 的行为
                        ident: 'postcss',
                        sourceMap:true,
                        plugins:[
                            require('autoprefixer')
                        ]
                    }
                },
                {
                    loader:'sass-loader',
                    options: {          //options 个性化 loader 的行为
                        sourceMap: true
                    }
                }
            ]
        }
    ]
},
plugins: [                      //插件 去注册到每个阶段 比如less转换成css 转换完成之后 用plugins 中间插入 把处理好的css拿到 去新建一个文件
    new MiniCssExtractPlugin({
        filename:'[name].css',          // 设置最终输出的文件名
        chunkFilename:'[id].css'            //唯一id输出文件名
    }),

],
optimization: {                 //优化
    minimizer: [new OptimizeCSSAssetsPlugin({})
    ]
}

}

loader 是对每个文件(模块)的预处理 处理sass less 这种方言类 处理成css html
MiniCssExtractPlugin.loader 必须去配合 plugins来处理
.babelrc 这里rc代表根目录文件 是babel的根配置文件
anywhere & 会打开静态服务器 然后再按Q 退出 就能又有服务器 又能写终端

3、postCSS 处理loader(兼容 添加css3前缀)

npm i -D postcss-loader
npm install autoprefixer --save-dev

{
loader: 'postcss-loader',
options:{
ident: 'postcss',
sourceMap:true,
plugins:[
require('autoprefixer')
]
}

4、css文件单独抽取

npm install --save-dev mini-css-extract-plugin
创建webpack.product.config.js
mode: 'production'
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

               MiniCssExtractPlugin.loader,{
                loader:'css-loader',
                options: {
                    sourceMap: true
                }

plugins: [
    new MiniCssExtractPlugin({
        filename:'[name].css', // 设置最终输出的文件名
        chunkFilename:'[id].css'
    })
]

5、webpack css压缩

npm i -D optimize-css-assets-webpack-plugin
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
optimization: {
minimizer: [new OptimizeCSSAssetsPlugin({})]
}

6、webpack js压缩

npm i -D uglifyjs-webpack-plugin
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

(各种loader)
clean-webpack-plugin 作用是打包前把dist目录里的文件清空
webpack 作用？

html类
html-webpack-plugin 作用是打包html

babel类
@babel/core
@babel/preset-env 作用是把es6转换成es5
babel-loader
@babel/polyfill 作用是让bubel可以支持es6的函数这些代码

css类
css-loader
less-loader
postcss-loader autoprefixer
mini-css-extract-plugin

图片类
url-loader
file-loader

vue类
vue
vuex
vue-router
vue-loader
vue-template-compiler
vue-style-loader

eslint类
eslint
eslint-loader
babel-eslint

(导入loader)
const CleanWebpackPlugin = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const webpack = require("webpack")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const VueLoaderPlugin = require("vue-loader/lib/plugin")