本学习教程使用的webpack及脚手架对应的版本如下:
"webpack": "^4.25.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.11.3"
1.Entry与OutPut的基本配置
module.exports = {
mode: 'development',
entry: './src/index.js', //入口文件为当前目录下的src下的index.js文件
output: {
path: path.resolve(__dirname, 'bundle'), //__dirname:表示当前文件所在的文件目录，也就是项目根目录,打包生成的文件放在bundle目录下
filename: 'main.js', //打包后的文件名
},
}
这就是entry和output的最基本的配置了，但是如果我们想对入口和出口做一些更加定制化的配置，我们该怎么做呢？比如说我们想对src/index.js文件配置两次，一次生成的打包文件名为main，一次生成的打包文件名为sub，那么我们应该怎么去做呢？这个时候我们就需要修改一下我们的配置文件了，如下所示:
module.exports = {
mode: 'development',
entry: {
main: './src/index.js', //入口文件为当前目录下的src下的index.js文件
sub: './src/index.js', //入口文件为当前目录下的src下的index.js文件
},
output: {
path: path.resolve(__dirname, 'bundle'), //__dirname:表示当前文件所在的文件目录，也就是项目根目录,打包生成的文件放在bundle目录下
filename: '[name].js', //在这里动态获取打包生成的文件打包后的文件名
},
}
这样修改完成后，再次对代码进行打包，打包完成后，在bundle目录下就生成了两个js文件，一个main.js，另一个是sub.js.
2.Entry与OutPut将打包生成的js文件放到cdn上
按照上面的配置，最终打包生成的index.html文件中，会自动帮我们引入两个js文件，代码如下所示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Webpack App</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script defer src="main.js"></script>
<script defer src="sub.js"></script>
</head>
<body></body>
</html>
如果我们需要将生成的js代码放到cdn地址上应该怎么做呢？这个时候我们就需要在output中添加一个publicPath的配置了，代码如下：
var path = require('path'); //引入node的核心模块path，来处理路径
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
main: './src/index.js', //入口文件为当前目录下的src下的index.js文件
sub: './src/index.js', //入口文件为当前目录下的src下的index.js文件
},
output: {
publicPath: 'http://cdn.com.cn',//添加一个publicPath，来表示生成的js文件所对应的cdn地址
path: path.resolve(__dirname, 'bundle'), //__dirname:表示当前文件所在的文件目录，也就是项目根目录,打包生成的文件放在bundle目录下
filename: '[name].js', //在这里动态获取打包生成的文件打包后的文件名
},
module: {
rules: [{
test: /\.(jpe?g|png|gif|svg)$/,
use: {
loader: 'url-loader',
options: {
name: '[name]_[hash:6]. [ext]',
outputPath: 'images',
limit: 204800 //表示当图片的大小超过200kb时，将其打包生成图片
}
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.scss$/,
use: ['style-loader', {
loader: 'css-loader',
options: {
importLoaders: 2,
modules: true
}
}, 'sass-loader', 'postcss-loader']
},
]
},
plugins: [new HtmlWebpackPlugin()],
}
再次打包代码，打包完成后，我们的index.html中webpack帮我们引入的js代码就变成了下面这样:
<script defer src="http://cdn.com.cn/main.js"></script>
<script defer src="http://cdn.com.cn/sub.js"></script>
这就是webpack output和entry的最基本的使用了，想了解更多可以参考官网
作业：document/guides/output management
网友评论