webpack 入门

webpack

webpack

webpack 是一个模块化加载工具，同时支持AMD、CMD等加载规范。三点优势：

1.代码分割：支持同步和异步两种依赖加载
2.loaders：默认情况下，只能处理JS文件。通过加载器可以把其他类型的资源转化JS输出
3.插件机制：提供强大的插件系统

安装全局

npm i webpack webpack-cli -g

一、初使用

npm init   //初始化
touch index.js   // 新建 在文件中输入代码
webpack index.js

当前json文件，webpack为全局

安装webpack当前开发环境依赖

npm i webpack webpack-cl -D

{
"name": "test1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack" //自定义修改
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0"
}
}

运行报错

npm run build
ERROR in Entry module not found: Error: Can't resolve './src' in 'E:\webpack'

编译的文件上一级由src文件夹包裹

请求文件路径位置

二、webpack 打包js的同时自动生成html，默认只打包js

npm install --save-dev html-webpack-plugin
touch webpack.config.js

npm run build  // 结果如下

三、webpack项目结构

官网详情地址

1、Entery Points

单一入口
人口文件可以在任意位置，哪怕不在src下

a、单一入口文件

entry:'./src/index.js',

b.多个入口文件
1.数组形式，会两个1文件整合在一个文件下面

entry:['./src/index.js','./src/login.js'],

2.对象形式，几个入口文件对应几个js文件

entry:{
home:'./src/index.js',
login:'./src/login.js',
list:'./src/list.js',
},

2、Output

配置输出信息

filename 输出文件名
path 输出路径，不能用于html中的js引用。
publicPath 虚拟目录，自动指向path编译目录 (复制一份)

a.在entry强制输出也可以，改变的是filename

b.output

module.exports = {
entry:'./src/index.js',
mode:'development',
output:{
filename:'bundle.js'
}
}

1bb8c 更多的时候，是名字命名一样，导致有时候文件改动，但js文件内容不变 【 hash 】

多入口文件一样。同一次编译的几个文件，hash码一样。[chunkhash]一样，但是是异步加载文件hash值

3、loader

webpack 只能理解 JavaScript 和 JSON 文件。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。

webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
entry:{
index:'./src/index.js'
},
mode:'development',
module:{
rules:[
// 查看css
{
test:/\.css$/,
//先处理css-loader 再style-loader
use:['style-loader','css-loader']
}
]
},
plugins:[
new HtmlWebpackPlugin(
{
template:'./src/index.html'  //入口文件
}
)
]
}

index.css

.main{
color:red
}

index.js

import './index.css'

console.log("Hello index.js")

less文件差不多，但要安装less less-loader。但现在我们样式并没有单独拎出来，是与JS并行加载的。ts也是雷同，注意单独配tsconfig.json，详情看官网

ExtractTextWebpackPlugin

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
]
}

注意：手写webpack配置项的时候，可能需要最新版本，兼容性问题

4、plugin

插件使用

插件自定义

webpack 插件是一个具有 apply 方法的 JavaScript 对象。apply 方法会被 webpack compiler 调用，并且 compiler 对象可在整个编译生命周期访问。

const pluginName = 'ConsoleLogOnBuildWebpackPlugin';

class ConsoleLogOnBuildWebpackPlugin {
apply(compiler) {
compiler.hooks.run.tap(pluginName, compilation => {
console.log('webpack 构建过程开始！');
});
}
}

5、手动配置热更新

模块热替换(HMR - hot module replacement)功能会在应用程序运行过程中，替换、添加或删除 模块，而无需重新加载整个页面

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

devServer: {
contentBase: './dist',
hot: true
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: '模块热替换'
}),
new webpack.HotModuleReplacementPlugin()
],

"scripts": {
"dev": "webpack-dev-server"
},

npm run dev