时间:2021-07-01 10:21:17 帮助过:56人阅读
优化类目
样式分离
第三方资源分离
区分开发环境
热更新
提取公共代码
1. CSS分离
- npm install extract-text-webpack-plugin -D
webpack.config.js
将css、less、sass文件单独从打包文件中分离
- + let cssExtract = new ExtractTextWebpackPlugin({
- + filename: 'css.css',
- + allChunks: true
- + });
- + let sassExtract = new ExtractTextWebpackPlugin('sass.css')
- + let lessExtract = new ExtractTextWebpackPlugin('less.css')
在webpack.config.js中单独添加规则,
test:匹配处理文件的扩展名的正则表达式
include/exclude手动指定必须处理的文件夹或屏蔽不需要处理的文件夹
- {
- test: /\.css$/,
- use: cssExtract.extract({
- fallback: "style-loader",
- use: ['css-loader?minimize','postcss-loader'],
- publicPath: "/dist"
- }),
- include:path.join(dirname,'./src'),
- exclude:/node_modules/
- },
- {
- test: /\.scss$/,
- use: sassExtract.extract({
- fallback: "style-loader",
- use: ["css-loader?minimize","sass-loader"],
- publicPath: "/dist"
- }),
- include:path.join(dirname,'./src'),
- exclude:/node_modules/
- },
- {
- test: /\.less$/,
- loader: lessExtract.extract({
- use: ["css-loader?minimize", "less-loader"]
- }),
- include:path.join(dirname,'./src'),
- exclude:/node_modules/
- },
然后运行webpack命令时报错
compilation.mainTemplate.applyPluginsWaterfall is not a function
Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
研究得出结论:webpack升级到v4然而响应的插件没有升级的原故。
解决方法:安装指定版本的依赖
- "html-webpack-plugin": "^3.0.4"
- "extract-text-webpack-plugin": "^4.0.0-beta.0"
resolve
指定extension之后可以不用在require或是import的时候加文件扩展名,会依次尝试添加扩展名进行匹配
- resolve: {
- //引入模块的时候,可以不用扩展名
- extensions: [".js", ".less", ".json"],
- alias: {//别名
- "bootstrap": "bootstrap/dist/css/bootstrap.css"
- }
- }
监听文件修改
webpack模式下使用,webpack-dev-server模式不用,可以将watch改为false
- watchOptions: {
- ignored: /node_modules/,
- aggregateTimeout: 300, //监听到变化发生后等300ms再去执行动作,防止文件更新太快导致编译频率太高
- poll: 1000 //通过不停的询问文件是否改变来判断文件是否发生变化,默认每秒询问1000次
- }
提取公共代码
- optimization: {
- splitChunks: {
- cacheGroups: {
- commons: {
- chunks: "initial",
- minChunks: 2,
- maxInitialRequests: 5, // The default limit is too small to showcase the effect
- minSize: 0 // This is example is too small to create commons chunks
- },
- vendor: {
- test: /node_modules/,
- chunks: "initial",
- name: "vendor",
- priority: 10,
- enforce: true
- }
- }
- }
- }
分离react react-dom ant公共代码
方法一:externals
在页面上引入第三方资源库,然后使用externals防止将某些 import 的包(package)打包到 bundle 中,而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。
- <script src="https://cdn.bootcss.com/react/16.4.0-alpha.0911da3/cjs/react.production.min.js"></script>
- <script src="https://cdn.bootcss.com/react-dom/16.4.0-alpha.0911da3/cjs/react-dom-server.browser.production.min.js"></script>
- externals: { 'react': 'React', 'react-dom': 'ReactDOM', // 提出ant design的公共资源, }
方法二:DLL
DLL在上篇文章中写过,但是打包后一直出现
后来才发现是页面上没有引入资源。。。。(我一直以为会webpack自动生成在页面上....)
在index.html文件中引入
- <script src="./vendor/react.dll.js"></script>
分离成功!上代码
webpack.base.js
输出目录 outputPath: 'images/' } } } ] }, plugins: [ //定义环境变量 new webpack.DefinePlugin({ development: JSON.stringify(process.env.NODE_ENV) }), new CleanWebpackPlugin(['dist']), cssExtract, lessExtract, sassExtract, new HtmlWebpackPlugin({ title: 'React Biolerplate by YuanYuan', template: './src/index.html', filename: `index.html`, hash: true }), new webpack.DllReferencePlugin({ manifest: path.join(dirname, 'vendor', 'react.manifest.json') }), new CopyWebpackPlugin([{ from: path.join(dirname,'vendor'),//静态资源目录源地址 to:'./vendor' //目标地址,相对于output的path目录 }]), /* new webpack.optimize.CommonsChunkPlugin({ name: 'common' // 指定公共 bundle 的名称。 + })*/ new webpack.HotModuleReplacementPlugin(), // 热替换插件 new webpack.NamedModulesPlugin() // 执行热替换时打印模块名字 ] };
- var path = require('path');
- var webpack = require('webpack');
- var ExtractTextWebpackPlugin = require("extract-text-webpack-plugin");
- const HtmlWebpackPlugin = require("html-webpack-plugin");
- const CleanWebpackPlugin = require('clean-webpack-plugin');
- const CopyWebpackPlugin = require('copy-webpack-plugin')
- let cssExtract = new ExtractTextWebpackPlugin({
- filename: 'css.css',
- allChunks: true
- });
- let sassExtract = new ExtractTextWebpackPlugin('sass.css')
- let lessExtract = new ExtractTextWebpackPlugin('less.css')
- module.exports = {
- entry:'./src/index.js',
- output: {
- path: path.resolve(dirname, './dist'),
- filename: 'bundle.[hash:8].js',
- publicPath: ''
- },
- resolve: {
- //引入模块的时候,可以不用扩展名
- extensions: [".js", ".less", ".json"],
- alias: {//别名
- "bootstrap": "bootstrap/dist/css/bootstrap.css"
- },
- modules: [path.resolve(dirname, 'node_modules')]
- },
- /* externals: {
- 'react': 'React',
- 'react-dom': 'ReactDOM',
- // 提出ant design的公共资源
- //'antd': 'antd',
- },*/
- devtool: 'source-map',
- devServer: {
- contentBase:path.resolve(dirname,'dist'),
- publicPath: '/',
- port: 8080,
- hot:true,
- compress:true,
- historyApiFallback: true,
- inline: true
- },
- watch: false, //只有在开启监听模式时,watchOptions才有意义
- watchOptions: {
- ignored: /node_modules/,
- aggregateTimeout: 300, //监听到变化发生后等300ms再去执行动作,防止文件更新太快导致编译频率太高
- poll: 1000 //通过不停的询问文件是否改变来判断文件是否发生变化,默认每秒询问1000次
- },
- optimization: {
- splitChunks: {
- cacheGroups: {
- commons: {
- chunks: "initial",
- minChunks: 2,
- maxInitialRequests: 5, // The default limit is too small to showcase the effect
- minSize: 0 // This is example is too small to create commons chunks
- },
- vendor: {
- test: /node_modules/,
- chunks: "initial",
- name: "vendor",
- priority: 10,
- enforce: true
- }
- }
- }
- },
- module: {
- rules:[
- {
- test: /\.js$/,
- use: {
- loader:'babel-loader',
- options: {
- presets: ['env','es2015', 'react'],
- }
- },
- include:path.join(dirname,'./src'),
- exclude:/node_modules/
- },
- {
- test: /\.css$/,
- use: cssExtract.extract({
- fallback: "style-loader",
- use: ['css-loader?minimize','postcss-loader'],
- publicPath: "/dist"
- }),
- include:path.join(dirname,'./src'),
- exclude:/node_modules/
- },
- {
- test: /\.scss$/,
- use: sassExtract.extract({
- fallback: "style-loader",
- use: ["css-loader?minimize","sass-loader"],
- publicPath: "/dist"
- }),
- include:path.join(dirname,'./src'),
- exclude:/node_modules/
- },
- {
- test: /\.less$/,
- loader: lessExtract.extract({
- use: ["css-loader?minimize", "less-loader"]
- }),
- include:path.join(dirname,'./src'),
- exclude:/node_modules/
- },
- {
- test: /\.(html|htm)/,
- use: 'html-withimg-loader'
- },
- {
- test: /\.(png|jpg|gif|svg|bmp|eot|woff|woff2|ttf)/,
- use: {
- loader:'url-loader',
- options:{
- limit: 5 * 1024,
- //指定拷贝文件的
webpack.config.js
- const path = require('path');
- const webpack = require('webpack');
- const merge = require('webpack-merge');//用来合并配置文件
- const base = require('./webpack.base');
- let other = '';
- //console.log(process.env.NODE_ENV )
- if (process.env.NODE_ENV == 'development') {
- other = require('./webpack.dev.config');
- } else {
- other = require('./webpack.prod.config');
- }
- //console.log(merge(base, other));
- module.exports = merge(base, other);
- webpack.prod.config.js
- const path = require('path');
- const webpack = require('webpack');
- const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
- module.exports = {
- output: {
- filename: 'bundle.min.js',
- },
- plugins: [
- new UglifyJSPlugin({sourceMap: true})
- ]
- }
原脚手架地址
优化后手架地址
相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!
推荐阅读:
从dev到prd使用详解
webpack中dev-server使用步骤详解
以上就是webpack脚手架优化使用的详细内容,更多请关注Gxl网其它相关文章!