在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
仅供自身参考学习