1-webpack4.x的安装和基本插件使用

本地安装webpack-------打包工具 ------> 输出结果（JS模块）

1-新建项目文件夹
2-初始化依赖 yarn init -y
3-命令 yarn add webpack webpack-cli -D
4-创建src/index.js(零配置下必须为index.js) 运行 webpack 0配置下，系统自动生成 dist/main.js

手动配置 webpack

1-创建配置文件 webpack.config.js
2-设置配置文件

const path=require('path')
module.exports={
    mode:'development',
    // 入口
    entry:'./src/index.js',
    output:{
        filename:'bundle.[hash:8].js',  //添加[hansh]  防止内存覆盖也缓存问题
        path:path.resolve(__dirname,'dist')  //解析出一个绝对路径  \MYPRO\dist
    }
}

3-再运行 webpack 生成dist/bundle ，得到新的解析包
4-由于是 yarn init -y 初始化 package.json
需要手动添加"scripts":{"build":"webpack --config webpack.config.js" }，添加脚本指令
5-使用自定指令运行打包 npm run build

- webpack-dev-server安装使用

1-yarn add webpack-dev-server -D
2-配置服务器的配置

devServer: {
         //开发服务器配置
         port:3000,
         progress:true,
         contentBase:'./dist'    //打包后输出到的目录
    }

- 使用HtmlWebpackPlugin插件

(Plugins是webpack的支柱功能，可以解决 loader 无法实现的其他事)

（该插件用于 npm run build 以设定模板和index.js =>打包压缩生成新的 html 页面）
1-在config.js 文件顶部引入 let HtmlWebpackPlugin=require('html-webpack-plugin');
2- yarn add html-webpack-plugin -D 安装插件
3-在 config.js添加plugins:[ ]

 plugins:[  
        new HtmlWebpackPlugin({    
            filename:'index.html',    //设置生成名称
            template:'./index.html' //选择模板
        }),
    ],

4-此时再运行打包 npm run build 会在/dist目录出现，一个根据模板生成的index.html

出现.png

-样式处理 loader

loader可以将模块的代码进行转换，loader可以将其他语言转换成javascript,甚至直接在javascript语言中import css

安装：yarn add css-loader style-loader -D
作用：整合所有的同类型文件，例N个 css，整合成一个css文件；
作用：css-loader: 解析@import语法；style-loader:在页面生成l<link>标签插入<head></head>，完成挂载

 // 引入文件模块
//添加配置`webpack.config.js`:
    module:{
       rules:[  //规则
        {
            test: /.css$/,
            use: ["style-loader","css-loader"]
        }
       ]
    }

-抽离css样式插件-`mini-css-extract-plugin`

1-安装：yarn add mini-css-extract-plugin -D
2-引入 :webpack.config.js顶层引入插件语句 const MiniCssExtract= require('mini-css-extract-plugin');
3-配置:在plugins:[ ]和moulde:{}中配置

 plugins:[
       new HTMLWebpackPlugin({ title: "这是我设置的title", template: "./src/index.html",filename:'myindex.html' }),
       new MiniCssExtractPlugin({
           //设置抽离出的 css 名称 /位置默认在dist
           filename:'main.css'
       })
    ],
 // 引入文件模块
    module:{
       rules:[  //规则
        {
            test: /.css$/,
            use: [MiniCssExtractPlugin.loader,"css-loader"]
        }
       ]
    }

4-重新打包后在dist中得到mian.css抽离后的文件，抽离可视为把零散的css文件内容进行整合；

minicssextractPlugin.png

-使用babel处理高级JS语法

实现ES6转ES5
1.安装： yarn add babel-loader @babel/core @babel/preset-env -D
暂略....

1-webpack4.x的安装和基本插件使用