webpack打包 — 打包工具

在node.js中安装全局webpack

cmd中运行 npm install webpack webpack-cli –g

在需要打包的文件中cmd

npm install webpack webpack-cli --save-dev
查看是否安装成功

webpack -v
初始化环境

npm init -y
项目文件配置
在项目目录下，新建config文件夹，用于存放配置文件;out文件夹，用于存放打包生成文件.
配置webpack.config.js文件


基础配置

// webpack.base.js用于通用的 webpack 配置
// 自动适配浏览器前缀
const autoprefixer = require(‘autoprefixer‘);
// 用于多页面入口打包，
const glob = require(‘glob‘);
// 获取路径
const path = require(‘path‘);
// 自动清除输出目录插件
const CleanWebpackPlugin = require(‘clean-webpack-plugin‘);
// webpack 打包出错 terminal log 插件
const FriendlyErrorsWebpackPlugin = require(‘friendly-errors-webpack-plugin‘);
// 引入外部资源，申生成入口插件
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
// 将 CSS 提取为独立的文件的插件
const MiniCssExtractPlugin = require(‘mini-css-extract-plugin‘);
// 获取项目根目录
const projectRoot = process.cwd();
// 多页面应用入口程序，通过匹配获取对应页面入口，单页面可以直接定义 entry 就行
const setMPA = () => {
const entry = {};
const htmlWebpackPlugins = [];
const entryFiles = glob.sync(path.join(projectRoot, ‘./src/*/index.js‘));
Object.keys(entryFiles)
.map((index) => {
const entryFile = entryFiles[index];
// ‘/Users/buzhuo/my-project/src/index/index.js‘
const match = entryFile.match(/src\/(.*)\/index\.js/);
const pageName = match && match[1];
entry[pageName] = entryFile;
return htmlWebpackPlugins.push(
new HtmlWebpackPlugin({
inlineSource: ‘.css$‘,
template: path.join(projectRoot, `./src/${pageName}/index.html`),
filename: `${pageName}.html`,
chunks: [‘vendors‘, pageName],
inject: true,
minify: {
html5: true,
collapseWhitespace: true,
preserveLineBreaks: false,
minifyCSS: true,
minifyJS: true,
removeComments: false,
},
})
);
});
// 返回入口以及入口对应的 htmlWebpackPlugins
return {
entry,
htmlWebpackPlugins,
};
};
const { entry, htmlWebpackPlugins } = setMPA();
module.exports = {
entry: entry,
output: {
path: path.join(projectRoot, ‘dist‘),
filename: ‘[name]_[chunkhash:8].js‘
},
module: {
rules: [
{
test: /.js$/,
use: [
{
loader: ‘babel-loader‘
}
],
},
{
test: /.css$/,
use: [
MiniCssExtractPlugin.loader,
‘css-loader‘,
],
},
{
test: /.less$/,
use: [
MiniCssExtractPlugin.loader,
‘css-loader‘,
‘less-loader‘,
{
// CSS预处理
loader: ‘postcss-loader‘,
options: {
plugins: () => [
autoprefixer({
browsers: [‘last 2 version‘, ‘>1%‘, ‘ios 7‘],
}),
],
},
},
{
// px 自动转换为 rem 移动端，若无移动端需求该 loader 可删去
loader: ‘px2rem-loader‘,
options: {
remUnit: 75,
remPrecision: 8,
},
},
],
},
{
test: /.(png|jpg|gif|jpeg)$/,
use: [
{
loader: ‘file-loader‘,
options: {
name: ‘[name]_[hash:8].[ext]‘,
},
},
],
},
{
test: /.(woff|woff2|eot|ttf|otf)$/,
use: [
{
loader: ‘file-loader‘,
options: {
name: ‘[name]_[hash:8][ext]‘,
},
},
],
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: ‘[name]_[contenthash:8].css‘,
}),
new CleanWebpackPlugin(),
new FriendlyErrorsWebpackPlugin(),
function errorPlugin() {
this.hooks.done.tap(‘done‘, (stats) => {
if (stats.compilation.errors && stats.compilation.errors.length && process.argv.indexOf(‘--watch‘) === -1) {
process.exit(1);
}
});
},
].concat(htmlWebpackPlugins),
// webpack 在打包时仅出错才会输出到 terminal，具体参数可到https://webpack.js.org/查看
stats: ‘errors-only‘,
};



开发环境配置

// merge 用来合并 webpack.base.js 与 webpack.dev.js
const merge = require(‘webpack-merge‘);
const webpack = require(‘webpack‘);
const baseConfig = require(‘./webpack.base‘);
const devConfig = {
mode: ‘production‘,
plugins: [
// 生产环境下开启热加载插件
new webpack.HotModuleReplacementPlugin(),
],
devServer: {
// 指定 devServer 相关，在此可以指定 port 等配置
contentBase: ‘./dist‘,
hot: true,
stats: ‘errors-only‘,
},
// 该参数见下图
devtool: ‘cheap-source-map‘,
};
module.exports = merge(baseConfig, devConfig);

生产环境配置

// css 压缩插件
const cssnano = require(‘cssnano‘);
// merge webpack.dev.js 与 webpack.prod.js
const merge = require(‘webpack-merge‘);
// 用于 cdn 加速 react，引用外部资源
const HtmlWebpackExternalsPlugin = require(‘html-webpack-externals-plugin‘);
// 提取 css 到单独文件并且压缩 css
const OptimizeCSSAssetsPlugin = require(‘optimize-css-assets-webpack-plugin‘);
// 前面提到的基本配置
const baseConfig = require(‘./webpack.base‘);
const prodConfig = {
mode: ‘production‘,
plugins: [
new OptimizeCSSAssetsPlugin({
assetNameRegExp: /\.css$/g,
cssProcessor: cssnano,
}),
new HtmlWebpackExternalsPlugin({
externals: [
{
module: ‘react‘,
entry: ‘https://11.url.cn/now/lib/16.2.0/react.min.js‘,
global: ‘React‘,
},
{
module: ‘react-dom‘,
entry: ‘https://11.url.cn/now/lib/16.2.0/react-dom.min.js‘,
global: ‘ReactDOM‘,
},
],
}),
],
// code split
optimization: {
splitChunks: {
minSize: 0,
cacheGroups: {
commons: {
name: ‘vendors‘,
chunks: ‘all‘,
minChunks: 2,
},
},
},
},
};
module.exports = merge(baseConfig, prodConfig);


所需依赖包汇总
autoprefixer

babel-loader clean-webpack-plugin css-loader cssnano eslint-loader file-loader friendly-errors-webpack-plugin glob html-inline-css-webpack-plugin html-loader html-webpack-externals-plugin html-webpack-inline-source-plugin html-webpack-plugin less less-loader mini-css-extract-plugin node-notifier optimize-css-assets-webpack-plugin postcss-loader postcss-preset-env px2rem-loader raw-loader react react-dom style-loader uglifyjs-webpack-plugin url-loader webpack webpack-cli webpack-merge


仅供自身参考学习

 全局安装webpack

webpack打包 --- 打包工具

原文：https://www.cnblogs.com/cjwblogs/p/15266061.html