webpack认识与简单配置
前端模块打包工具webpack简单使用
webpack 介绍
webpack 是一个现代 JavaScript 应用程序的静态模块打包工具，可以打包Js文件、图片、字体、样式文件等（基于nodejs）。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图会映射项目所需的每个模块，并生成一个或多个 bundle.
安装
在开始之前，请确保安装了 Node.js 的最新版本。使用旧版本，你可能遇到各种问题，因为它们可能缺少 webpack 功能，或者缺少相关 package
mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack --save-dev
npm install webpack-cli --save-dev //若使用 webpack v4+ 版本，就需要安装 CLI，用于在命令行中运行 webpack
2
3
4
创建相应文件及文件夹，如webpack.config.js，后续在此文件里面做相应配置(若无webpack.config.js则使用内置默认配置)
webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- main.js
|- index.html
|- /src
|- index.js
|- /node_modules
2
3
4
5
6
7
8
9
package.json里面修改scripts，加入自定义打包命令
"scripts":{
"bundle":"wekpack"
}
2
3
基本配置
- 入口(entry)：以哪个文件开始作为入口起点开始打包
- 输出(output)：打包后的文件输出到哪个文件
- loader：利用各种loader对各种文件进行处理，比如我们书写less时，就会用到less-loader css-loader style-loader
- 插件(plugin): 在打包的某一时刻利用各种plugin对打包文件进行处理，比如打包用到的html-webpack-plugin会自动在打包文件夹下生成index.html，而无需我们每次
- 模式(mode)：提供 mode 配置选项（none, development 或 production），告知 webpack 使用相应环境的内置优化，比如在production下打包就会进行代码压缩
入口(entry)配置
webpack.config.js中，entry接受一个对象或者字符串，在作为对象时可以指定不同的键值，如下main和sub作为不同键值，在后续输出可输出两个文件， main.js和sub.js （output filename中需要[name].js占位输出）
entry接受一个对象，可以使用多个入口
module.exports = {
entry: {
main: './src/index1.js',
sub: './src/index2.js'
}
}
2
3
4
5
6
entry接受一个字符串
module.exports = {
entry: './src/index.js'
}
2
3
输出(output)配置
配置 output 选项可以控制 webpack 如何向硬盘写入编译文件。注意，即使可以存在多个 entry 起点，但只指定一个 output 配置。 _dirname指本文件所在目录即webpack.config.js所在目录，这里是./ ， nodejs中path模块path.resolve()最终会输出一个绝对路径
const path = require('path');//引入nodejs的path模块处理文件路径
module.exports = {
entry: {
main: './src/index1.js',
sub: './src/index2.js'
},
output: {
filename: '[name].js',
path: path.resolve(_dirname,' dist')
}
};
2
3
4
5
6
7
8
9
10
11
loader配置
module.exports = {
module: {
rules: [
{ test: /\.css$/, use: 'css-loader' },
{ test: /\.ts$/, use: 'ts-loader' }
]
}
};
2
3
4
5
6
7
8
可以指定多个loader,各个loader处理顺序从后向前，从右到左
module.exports = {
module:{
rules:[{
test:/\.(jpg|png|gif)$/,
use:{
loader:'url-loader',//可以将图片以base64直接打包到js文件中
options:{
name:'[name]_[hash].[ext]',
outputPath:'images/',
limit：10240//大于10k就会输出到images文件下，不会以base64打包到js中
}
}
},{
test:/\.scss$/,
use:[
'style-loader',
{
loader:'css-Loader',
options:{
importLoaders:2,//每次经过css-loader会再次走下面两个loader处理,在某个样式中引入其他样式会重新开始loader处理，避免只走上面两个loader而出现问题
moddules:true //css模块化
}
},
'sass-loader',
'postcss-loader'
]
}]
};
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
插件(plugin)配置
由于插件可以携带参数/选项，你必须在 webpack 配置中，向 plugins 属性传入 new 实例。 根据你使用 webpack 的需要，这里有多种方式使用插件。
const HtmWebpackPLugin = require('html-webpack-pLugin');
const webpack = require('webpack'); //访问内置的插件
const CleanwebpackPlugin = require('clean-webpack-plugin');
module.exports = {
plugins:[
new HtmLWebpackPlugin({
template:' src/index.html'//HtmLWebpackPlugin使用src/index.html作为模板html，会以此模板生成dist目录下的index.html
}),
new CleanwebpackPlugin([' dist']), //CleanwebpackPlugin会在打包前将dist目录下文件删除，避免每次手动删除
new webpack.ProgressPlugin()
]
};
2
3
4
5
6
7
8
9
10
11
12