1、手动新建文件夹lm_webpack,或者在当前目录下进入命令行新建文件夹
mkdir lm_webpack
2、进入命令行,初始化webpack,并本地安装webpack,如果你使用 webpack 4+ 版本,你还需要安装 CLI。
npm init -y
npm install --save-dev webpack
npm install webpack webpack-cli --save-dev
完成以上操作后,文件夹里面的内容有:
3、新建文件夹src,存放资源文件,并在src里面新建入口JS:index.js
4、新建webpack配置文件,公共配置webpack.common.js、开发环境webpack.dev.js、生成环境webpack.prod.js
5、在当前目录下安装需要的资源
npm install html-webpack-plugin -D 自动生成html
npm install clean-webpack-plugin -D 清除目录文件
…
安装后,package.json配置如下,红色框是已安装的资源:
6、各文件配置
package.json
{
"name": "my_webpack_1",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"start": "webpack-dev-server --open --config webpack.dev.js",
"build": "webpack --config webpack.prod.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.2.0",
"express": "^4.17.1",
"file-loader": "^4.2.0",
"html-webpack-plugin": "^3.2.0",
"image-webpack-loader": "^6.0.0",
"mini-css-extract-plugin": "^0.8.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"style-loader": "^1.0.0",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.9",
"webpack-dev-middleware": "^3.7.2",
"webpack-dev-server": "^3.8.2",
"webpack-merge": "^4.2.2",
"xml-loader": "^1.2.1"
},
"dependencies": {
"lodash": "^4.17.15"
}
}
webpack.common.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // css分离,要不然打包的时候css全部打包到JS中
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 自动生成html文件
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
entry: {
app: './src/index.js',
},
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader','style-loader'],
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader',
{
loader: 'image-webpack-loader',
options: {
disable: true, // webpack@2.x and newer
},
},
],
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
},
{
test: /\.xml$/,
use: [
'xml-loader'
]
},
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({ // 自动生成html,包括引入文件
title: 'Output Management'
}),
new MiniCssExtractPlugin({ // 分离css
filename: '[name].css',
chunkFilename: '[name].[hash:7].min.css',
}),
new OptimizeCssAssetsPlugin({ // 压缩css
assetNameRegExp:/\.css$/g,
cssProcessor:require("cssnano"),
cssProcessorPluginOptions:{
preset:['default',{discardComments:{removeAll:true}}]
},
canPrint:true
})
],
};
webpack.dev.js
const path = require('path');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'development', // 开发模式
devtool: 'inline-source-map', // 更容易地追踪错误和警告(仅解释说明,不要用于生产环境)
devServer: { // web服务
contentBase: path.join(__dirname, "dist"),
compress: true, // 目录的文件都做 gzip 压缩
port: 9000
},
});
webpack.prod.js
const path = require('path');
const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); // 删除不引用的代码
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'production', // 生产模式
// devtool: 'source-map', // 避免在生产中使用 inline-*** 和 eval-***,因为它们可以增加 bundle 大小,并降低整体性能。
output: {
filename: '[name].[hash:7].js',
path: path.resolve(__dirname, 'dist'),
publicPath: './', // 输出解析文件的目录,url 相对于 HTML 页面
},
plugins: [
new UglifyJSPlugin({
sourceMap: true
}),
],
optimization: {
moduleIds: 'hashed', // 保持vender的hashed不变
runtimeChunk: 'single',
splitChunks: {
cacheGroups: {
vendor: { // 第三方库单独打包
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all',
},
},
},
},
});
7、项目执行
运行项目:npm run start
打包项目:npm run build