github代码地址
通过 npm script 运行 webpack
在package.json文件中运行的脚本，默认是可以读取到 node_modules/.bin/下面的所以命令的通过npm run build运行打包
原理：模块的局部安装会在node_modules/.bin目录下创建软链接
在package.json的scripts中添加一条脚本命令： "build":"webpack",
{
"name": "webpack.1.2",
"version": "1.0.0",
"description": "通过 npm script 运行 webpack",
"main": "index.js",
"scripts": {
"build":"webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.35.3",
"webpack-cli": "^3.3.5"
}
}
通过在终端运行npm run build 即可完成打包项目。
### webpack 核心概念之entry用法
在webpack.config.js文件中：
1. 单入口：entry是一个字符串。
module.exports = {
entry:'./src/file.js'
}
1. 多入口：entry是一个对象
module.exports = {
entry: {
index: './src/index.js',
search: './src/search.js'
}
}
webpack 核心概念之Output的用法
1. Output用来告诉webpack如何将编译后的文件输出到磁盘
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, 'dist'), // 单入口只要配置path和filename这两个参数
filename: 'bundle.js'
},
mode:'production'
}
1. Output多入口配置
module.exports = {
entry: {
index: './src/index.js',
search: './src/search.js'
},
output: {
filename: '[name].js', // 通过占位符确保文件名称的唯一性
path: __dirname + '/dist'
},
mode:'production'
}
webpack 核心概念之loaders的用法
webpack的开箱即用只支持js和json两种文件类型，通过loaders去支持其他文件类型，并且将他们转化成有效的模块，并且可以添加到依赖图中，loaders本身是一个函数，接受源文件作为参数，返回转换后的结果。
常见的loaders
| 名称 | 描述 |
| :----: | :----: |
| babel-loader | 转换ES6ES7等新特性语法 |
| css-loader | 支持.css文件的加载和解析 |
| less-loader | 将less转换为css |
| ts-loader | 将ts转换为js |
| file-loader | 进行图片，字体等的打包 |
| raw-loader | 将文件以字符串的形式导入 |
| thread-loader | 多进程打包js和css |
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
mode: 'production',
module: {
rules: [
{
test: /\.txt$/, use: 'raw-loader' // test 指定匹配规则 use 指定使用的loader名称
}
]
}
}
webpack 核心概念之plugins的用法
插件用于bundle文件的优化，资源管理和环境变量注入，作用于整个构建过程
常见的plugins
| 名称 | 描述 |
| :----: | :----: |
| CommonsChunkPlugin | 将chunks相同的模块代码提取成公共js文件 |
| CleanWebpackPlugin | 清理构建项目 |
| ExtractTextWebpackPlugin | 将chunks相同的模块代码提取成公共js文件 |
| CommonsChunkPlugin | 将css从bundle文件里提取成独立的css文件 |
| CopyWebpackPlugin | 将文件或者文件夹拷贝到构建的输出目录 |
| HtmlWebpackPlugin | 创建html文件去承载输出的bundle |
| UglifyjsWebpackPlugin | 压缩js |
| ZipWebpackPlugin | 将打包出的资源生成一个Zip包 |
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
mode: 'production',
module: {
rules: [
{
test: /\.txt$/, use: 'raw-loader' // test 指定匹配规则 use 指定使用的loader名称
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html' // 创建html文件去承载输出的bundle
})
]
}
### webpack核心概念之mode的用法
<b> 概念：</b>Mode用于指定当前的构建环境是：production ， development ，还是 none 。设置mode的值，可以使用webpack在相应阶段的内置函数，默认值为production（webpack4.x以后才有的概念），如果是productin，webpack会默认开启一些在生产阶段才使用的内置功能，如下参考：
| 选项 | 描述 |
| :----: | :----: |
| development | 设置process.env.NODE_ENV的值为development，开启NameChunksPlugin和NameModulesPlugin |
| production | 设置process.env.NODE_ENV的值为production，开启FlagDependencyUsagePlugin,FlagIncludedChunksPlugin,ModuleConcatenationPlugin,NoEmitOnErrorsPlugin,OccurrenceOrderPlugin,SideEffectsFlagPlugin和TerserPlugin |
| none | 不开启任何优化选项 |
网友评论