为了方便以后前端项目的开发，决定从0开始搭建一个webpack环境的工程项目，也算是对webpack插件指南和webpack配置指南进行一个总结。该项目所使用的loaders和插件如下所示：
loaders
webpack-dev-server，style-loader，css-loader，file-loader，raw-loader，babel-loader，ts-loader，postcss-loader，eslint-loader
插件
html-webpack-plugin，clean-webpack-plugin，mini-css-extract-plugin，autoprefixer，postcss，uglifyjs-webpack-plugin，copy-webpack-plugin，html-webpack-externals-plugin，webpack-merge
1.环境搭建
1.1 初始化
创建一个空项目后，首先执行npm init进行初始化。创建完package.json文件后，再执行如下命令先安装webpack。
npm install --save-dev webpack webpack-cli
1.2创建配置文件
在实际开发中，一般都会有两个环境，包括开发环境和生产环境，所以在这里同样创建两个配置文件和一个基础配置文件。分别为webpack.base.config.js，webpack.dev.config，webpack.prod.config。然后通过webpack-merge将配置文件进行合并。
基础配置文件
基础文件主要用于配置入口(entry)，输出(output)，一些开发环境和测试环境公用的loader和插件，在这里先进行单页面的配置，多页面的等以后用到的时候再进行完善。其基础配置信息主要如下所示：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/index.js'
},
output: {
path: path.resolve(__dirname, './../dist'),
filename: '[name].[hash].js',
},
resolve: {
extensions: [".ts", ".js",'.json'],
alias: {
'@': resolve('src'),
}
},
module: {
rules: [
{
test: /\.js$/,
loader: 'eslint-loader',
enforce: "pre",
include: [path.resolve(__dirname, 'src')], // 指定检查的目录
options: { // 这里的配置项参数将会被传递到 eslint 的 CLIEngine
formatter: require('eslint-friendly-formatter') // 指定错误报告的格式规范
}
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: './img/[name].[hash].[ext]'
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: './media/[name].[hash].[ext]'
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: './font/[name].[hash].[ext]'
}
},
{
test: /\.tsx?$/,
loader: "awesome-typescript-loader"
},
{
enforce: "pre",
test: /\.js$/,
loader: "source-map-loader"
}
]
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
minify:{
collapseWhitespace: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
useShortDoctype: true
},
}),
new CleanWebpackPlugin()
],
}
开发环境配置文件
开发环境主要是设置devtool和创建服务器，如下所示：
const baseConfig = require('./webpack.base.config')
const path = require('path');
const merge = require('webpack-merge')
module.exports = () => {
return merge(baseConfig,{
devServer: {
contentBase: './../dist',
host:'localhost',
port:8089
},
devtool:'source-map',
module: {
rules: [
{
test:/\.css$/,
use:[
'style-loader',
'css-loader'
]
}
]
},
});
}
生产环境配置文件
生产环境主要是用于压缩代码，提取公共文件等信息，如下所示：
const baseConfig = require('./webpack.base.config');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const merge = require('webpack-merge')
module.exports = () => {
return merge(baseConfig,{
mode:'production',
optimization: {
minimizer: [new OptimizeCSSAssetsPlugin({})],
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true,
},
},
},
},
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: [
require('autoprefixer')({
browsers: ['last 30 versions', "> 2%", "Firefox >= 10", "ie 6-11"]
})
]
}
}
],
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].[hash].css',
chunkFilename: './css/[id].[hash].css',
}),
new UglifyJsPlugin(),
new CopyWebpackPlugin([
{
from: __dirname +'/static',
to:__dirname + '/dist/static'
}
]),
new HtmlWebpackExternalsPlugin({
externals: [
{
module: 'jquery',
entry: 'https://unpkg.com/jquery@3.2.1/dist/jquery.min.js',
global: 'jQuery',
},
],
})
]
});
}
配置完成后，需要在package.json文件中添加两个命令，如下所示：
"dev": "webpack-dev-server --config build/webpack.dev.config.js --open",
"build": "webpack --config build/webpack.prod.config.js --mode production"
网友评论