管理资源
还是使用之前的文件,这里不做修改
加载css
npm install --save-dev style-loader css-loader
webpack.config.js
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/, //以css结尾的文件
use: [
'style-loader',
'css-loader'
]
}
]
}
};
此时:
然后,运行npm run build ,并打开dist文件夹下的html,此时的浏览器页面显示红色的 hello webpack
加载图像
npm install --save-dev file-loader
此时webpack.config.js
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/, //以css结尾的文件
use: [
'style-loader',
'css-loader'
]
},
{
test: /.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
]
}
};
原理和css引入一样,但是最终文件会被处理成新的图片,并使用新的命名方式,这里不做展示,字体类似
JSON文件可以直接通过import引入,并打包到最终的js文件下
管理输出清理dist文件夹
到目前为止,我们都是在 index.html
文件中手动引入所有资源,然而随着应用程序增长,并且一旦开始 在文件名中使用 hash] 并输出 多个 bundle,如果继续手动管理 index.html
文件,就会变得困难起来。然而,通过一些插件可以使这个过程更容易管控。
npm install --save-dev html-webpack-plugin
html-webpack-plugin是用来清除上一次打包到dist文件夹下的东西,入口可以有多个,会生成对应的js
npm install --save-dev clean-webpack-plugin
清理不用的依赖dist文件夹下无用的东西
代码如下:webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: '管理输出'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/, //以css结尾的文件
use: [
'style-loader',
'css-loader'
]
},
{
test: /.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
]
}
};
webpack插件通过manifest追踪模块到bundle之间的映射
开发环境
先将mode设置为development
使用source map查错,
devtool: 'inline-source-map',
由于每次打包然后才能看到效果,所以很不方便,所以使用 webpack-dev-server,可以实时编译预览,此时dist文件夹是空的
package.json
"scripts": {
"build": "webpack --config webpack.config.js",
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --open"
},
webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
app: './src/index.js',
print: './src/print.js'
},
devtool: 'inline-source-map', // 报错信息位置
devServer: {
contentBase: './dist'
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: '管理输出'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/, //以css结尾的文件
use: [
'style-loader',
'css-loader'
]
},
{
test: /.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
]
}
};