webpack4基础知识点（一）

1.安装好node,新建一个目录，进入该目录然后执行

//创建文件夹
mkdir webpack4demo
//进入
cd webpack4demo
//初始化
npm init -y

会在该目录下出现一个package.json文件

2.局部安装webpack，webpack-cli

npm install webpack webpack-cli

3.npm script 运行webpack

模块的局部安装会在node_modules/.bin目录创建软链接，因此webpack打包时需要手动在终端输入 ./node_modules/.bin/webpack 这时才能运行webpack打包

为了方便使用可以在package.json中设置

下面代码中关于测试环境dev讲解可查看文中 第9项

"scripts":{
	"dev": "webpack-dev-server --config webpack.dev.js", // 测试环境，记得在 webpack4demo 根目录创建 webpack.dev.js
    "build":"webpack" // 打包生产
}

通过 npm run build 指令执行打包

devDependencies: 用于本地开发环境。存放如构建，eslint，单元测试等相关依赖
dependencies：用于用户发布环境，开发阶段的依赖最后不会被打入包内。存放如框架，组件，utils等业务逻辑相关的包

4.webpack核心概念——entry

entry：指定打包入口
单入口：entry是一个字符串

module.exports={
    entry:'./path/filename.js' //入口文件，若不配置webpack4将自动查找src目录下的index.js文件
}

多入口：entry是一个对象

module.exports={
    entry: {
        app: './path/app.js',
        admin: './path/admin.js'
    },
}

5.output:如何将编译后的文件输出到磁盘

const path = require('path');
module.exports={
    entry:'./path/filename.js',
    output: {
        filename: '[name].[chunkhash:8].js',//输出文件名，[name]表示入口文件js名
        path: path.join(__dirname, 'dist')//输出文件路径
    },
}

6.loaders:

webpack只支持js和json两种文件类型通过loaders去支持其他文件类型并将他们转化为有效的模块可以添加到依赖图中
Loaders 本身是一个函数，接受源文件作为参数，返回转换的结果

名称	描述
babel-loader	转换es6,es7等js新特性语法
css-loader	支持.css文件的加载和解析
Less-loader	将less文件转化为css
ts-loader	将ts转化为js
file-loader	进行图片，字体等的打包
raw-loader	将文件以字符串的形式导入
thread-loader	多进程打包js,css

module.exports={
    module:{
        rules:[
            {
                test:/\.txt$/,  //————>指定匹配规则
                use:'raw-loader' //use指定使用loader名称
            }
        ]
    }
}

7.plugins:插件

常见的plugins:

名称	描述
CommonsChunkPlugin	将chunks相同的模块代码提取成公共js
CleanWebpackPlugin	清理构建目录
ExtractTextWebpackPlugin	将css从bundle文件里提取成一个独立的css
CopyWebpackPlugin	将文件或文件夹拷贝到构建的输出目录
HtmlWebpackPlugin	创建html文件去承载输出的bundleUglifyjsWebpackPlugin压缩js
ZipWebpackPlugin	将打包出来的资源生成一个zip包

const path = require('path');
//html扩展包
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports={
    plugins:[
        new HtmlWebpackPlugin({    //———>放在plugins数组里
            template:path.join(__dirname, 'src/admin.html'),
        })
    ]
}

8.文件监听

文件监听就是在发现源文件发生变化时自动重新构建出新的输出文件。
webpack 开启监听模式：(缺点：浏览器不会自动刷新，需要手动刷新浏览器)

• 启动webpack命令时加上 —watch 参数
• 在配置webpack.config.js中设置 watch:true
  package.json

"scripts":{
    "build":"webpack",
    "watch":"webpack —-watch" //开启监听模式
}

9.热更新:webpack-dev-server

先下载依赖包

npm i webpack-dev-server -D

package.json

"scripts":{
    "build":"webpack",
    "watch":"webpack —-watch", //开启监听模式
    "dev":"webpack-dev-server ——open" // ——open表示每次自动打开浏览器
}

webpack.config.js

module.exports={
    devServer: { //配置开发服务功能
        // 你要提供哪里的内容给虚拟服务器用。这里最好填绝对路径。
        contentBase: path.resolve(__dirname, 'dist'),
        // 服务器的IP地址，可以使用IP也可以使用localhost
        host: 'localhost',
        // 服务端压缩是否开启，目前开不开都行，想关你就关
        compress: true,
        // 配置服务端口号，建议别用80，很容易被占用，你要是非要用也是可以的。
        port: 9090,
        clientLogLevel: 'warning',
        historyApiFallback: true, //如果为 true ，页面出错不会弹出 404 页面。
        hot: true, //修改或模块后，保存会自动更新，页面不用刷新呈现最新的效果。它依赖于webpack.HotModuleReplacementPlugin插件
    }
}

10.文件指纹策略：chunkhash,contenthash,hash

打包后输出文件名的后缀
便于版本管理，没有修改的文件可以缓存，加速页面加载速度

选项	描述
hash	和整个项目的构建有关，只要项目文件有修改，整个项目构建的hash值就会更改
chunkhash	和webpack打包的chunk有关，不同的entry会生成不同的chunkhash值
contenthash	根据内容定义hash,文件内容不变则contenthash不变
注意点：

• js里没有contenthash
• bundle: 打包最终生成的文件
• chunk: 每个chunk是多个module组成，可以通过代码分割成多个chunk
• module: webpack中的模块（js,css,图片等等）
• 在开发环境中chunkhash与contenthash 会和热更新插件冲突，因此在开发环境中不使用chunkhash后缀名或者把devser里的hot:true注释掉，但是开发环境中hot还是很有必要的，因此推荐开发环境中不使用chunkhash后缀名，只在生产环境中使用。

我的个人博客,有空来坐坐