webpack浅浅学习复习

对于webpack学习，我个人觉得还是自己手动去从零开始搭建框架，然后进行webpack得学习比较好，然后在用于项目内，因为学习得过程中，跟使用得过程中总会不一样得，实际过程中，会遇到各种问题。

这次还是用得是webpack4得，webpack5看了，但都差不多，只是优化算法得改变，和一些属性。在之前作者也曾提过webpack5.0旨在减少配置的复杂度，使其更容易上手(webpack4的时候也说了这句话)

直接看我配置吧，看代码注释就好了，码字太烦了。

对于package.json

utils

const path = require('path') //node自带路径exports.resolve = (dir) => path.resolve(__dirname, dir) // 相对位置转换绝对位置exports.assetsPath = (_path) => path.posix.join("static", _path)

webpack.base.conf.js

const utils = require("./utils")
const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')// 处理static下面的静态文件
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // css单独文件
const WebpackBar = require('webpackbar'); // 美化webpack控制台输出内容
const isDev = process.env.NODE_ENV === 'development'module.exports = {entry: { // 入口app: ['./src/index.js']},output: {// 出口path: utils.resolve('../dist'),filename: 'static/js/[name]_[hash:6].js',publicPath: isDev ? '/' : './', // 打包后资源访问公共路径前缀 chunkFilename: 'static/js/[name].[chunkhash:5].chunk.js',},module: {// 模块rules: [{test: /\.(js|jsx|ts|tsx)$/,//一个匹配loaders所处理的文件的拓展名的正则表达式，这里用来匹配js和jsx文件（必须）exclude: /node_modules/,//屏蔽不需要处理的文件（文件夹）（可选）use: {loader: 'babel-loader',options: {  //用babel-loader需要把es6->es5presets: ['@babel/preset-env',['@babel/preset-react', { runtime: "automatic" }],  //yarn add @babel/core @babel/preset-react -D'@babel/preset-typescript'],plugins: ['@babel/plugin-proposal-class-properties',// '@babel/plugin-syntax-dynamic-import']}}},{test: /\.css$/,use: [isDev ? 'style-loader' : {loader: MiniCssExtractPlugin.loader,options: {publicPath: '../../'}}, {loader: 'css-loader',options: {sourceMap: true,}},{loader: 'postcss-loader',options: {postcssOptions: {plugins: [require('autoprefixer')]}}},]},{test: /\.less$/,exclude:/\.module\.less$/,use: [isDev ? 'style-loader' : {loader: MiniCssExtractPlugin.loader,options: {publicPath: '../../' //解决打包图片路径不对}},{loader: 'css-loader',},{loader: 'postcss-loader',options: {postcssOptions: {plugins: [require('autoprefixer')]}}},{loader: 'less-loader',},]},{test: /\.module\.less$/,use: [isDev ? 'style-loader' : {loader: MiniCssExtractPlugin.loader,options: {publicPath: '../../'}},{loader: 'css-loader',options: {sourceMap: true,modules: {localIdentName: isDev ? '[path]_[name]__[local]_[hash:base64:5]' : '[local]_[hash:base64:5]', // 模块化css修改样式名称}}},{loader: 'postcss-loader',options: {postcssOptions: {plugins: [require('autoprefixer')]}}},{loader: 'less-loader',options: {lessOptions: {module: true},sourceMap: true,}},{loader: 'style-resources-loader',options: {patterns: [utils.resolve('../src/styles/index.less')]// 全局样式文件 可以用全局变量样式和mixins等}}]},{test: /\.(png|jpe?g|svg|gif|mp3)$/,loader: 'url-loader',  // 这里是loader 写use要报错options: {limit: 10000, // url-loader 包含file-loader，这里不用file-loader, 小于10000B的图片base64的方式引入，大于10000B的图片以路径的方式导入name: 'static/img/[name].[hash:7].[ext]'}},{test: /\.(woff2?|eot|ttf|otf)$/,loader: 'url-loader', // 这里是loader 写use要报错options: {limit: 10000, // url-loader 包含file-loader，这里不用file-loader, 小于10000B的图片base64的方式引入，大于10000B的图片以路径的方式导入name: 'static/fonts/[name].[hash:7].[ext]'}},]},resolve: {extensions: ['.js', '.json', '.jsx', '.ts', '.tsx'], // 解析扩展。（当我们通过路导入文件，找不到改文件时，会尝试加入这些后缀继续寻找文件）alias: {'@': path.join(__dirname, '..', "src"), // 在项目中使用@符号代替src路径，导入文件路径更方便}},plugins: [// 插件new CopyWebpackPlugin([{from: utils.resolve('../static'),  // 从哪个目录copyto: ".", // copy到那个目录}]),new MiniCssExtractPlugin({filename: utils.assetsPath('css/[name]_[hash:7].css'),chunkFilename: utils.assetsPath('css/[id]_[chunkhash:7].css'),ignoreOrder: true}),new WebpackBar()],}

webpack.dev.conf.js

const webpackMerge = require('webpack-merge') // 合并webpack配置
const baseConfig = require('./webpack.base.conf')
const utils = require('./utils')
const HtmlWebpackPlugin = require('html-webpack-plugin') // 解析html
const portfinder = require('portfinder');//自动查找可用端口
const FriendlyErrorsWebpackPlugin = require("friendly-errors-webpack-plugin");//识别某些类的webpack错误，并清除，汇总和优先处理它们
const devWebpackConfig = webpackMerge(baseConfig, {plugins: [ // 插件new HtmlWebpackPlugin({filename: utils.resolve('../dist/index.html'), // html模板的生成路径template: './public/index.html', // 模板favicon: "./public/favicon.ico",inject: true, // true：默认值，script标签位于html文件的 body 底部}),],stats: 'errors-warnings', // 控制台输出内容devtool: 'inline-source-map',devServer: {// 开发环境配置historyApiFallback: true, // 当找不到路径的时候，默认加载index.html文件hot: true,contentBase: false, // 告诉服务器从哪里提供内容。只有在你想要提供静态文件时才需要// compress: true, //一切服务器都用gzipinline: true,port: 5500, // 端口publicPath: '/', // 前缀open: true, // true，打开默认浏览器host: "localhost", //设置本地urloverlay: { // 错误全屏显示errors: true,warnings: false},proxy: {// // 接口请求代理// "/api": {//   secure: false,//   target: "http://127.0.0.1:8082"// }},}
})
module.exports = new Promise((resolve, reject) => {portfinder.basePort = devWebpackConfig.devServer.port;portfinder.getPort((err, port) => {if (err) {reject(err)} else {process.env.PORT = portdevWebpackConfig.devServer.port = portdevWebpackConfig.plugins.push(new FriendlyErrorsWebpackPlugin({compilationSuccessInfo: {messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],notes: []},clearConsole: true}))resolve(devWebpackConfig)}})
})

webpack.prod.conf.js

const HtmlWebpackPlugin = require("html-webpack-plugin") // 解析html文件
const utils = require("./utils") // 导入公共方法
const webpackMerge = require('webpack-merge') // 合并webpack配置
const baseConfig = require('./webpack.base.conf')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; //打包完成，可视化查看每个文件大小
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // 每次打包清理文件
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); // 压缩css
const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); // 压缩js
const CompressionWebpackPlugin = require('compression-webpack-plugin')//压缩为gizpmodule.exports = webpackMerge(baseConfig, {plugins: [ // 插件new HtmlWebpackPlugin({filename: utils.resolve('../dist/index.html'), // html模板生成路径template: './public/index.html', // 模板favicon: "./public/favicon.ico",inject: true, // true 默认值 script标签位于body底部hash: true, // 打包资源插入html加上hash// html文件压缩minify: {removeComments: true, // 去除注释collapseWhitespace: true, // 压缩空间removeAttributeQuotes: true // 去除属性 标签的 引号  例如 
 输出 
}}),new CompressionWebpackPlugin({asset: '[path].gz[query]',algorithm: 'gzip',deleteOriginalAssets: true,test: /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i,deleteOriginalAssets: true,threshold: 10240,minRatio: 0.8}),new BundleAnalyzerPlugin(),new CleanWebpackPlugin(),],optimization: { // 优化splitChunks: {chunks: 'async',//表示哪些代码需要优化，有三个可选值：initial(初始块)、async(按需加载块)、all(全部块)，默认为 asyncminSize: 30000,//表示在压缩前的最小模块大小maxSize: 0,minChunks: 1,//表示被引用次数maxAsyncRequests: 5,//按需加载时候最大的并行请求数maxInitialRequests: 3,// 一个入口最大的并行请求数automaticNameDelimiter: '~',name: true,cacheGroups: {//缓存组。缓存组的属性除上面所有属性外vendors: {test: /[\\/]node_modules[\\/]/,priority: -10},commons: {test: /[\\/]node_modules[\\/]/,name: 'vendors',chunks: 'all',},default: {minChunks: 2,priority: -20,reuseExistingChunk: true}}},minimizer: [  // 压缩cssnew UglifyJsPlugin({parallel: true,  //使用多进程并行运行来提高构建速度cache: true, // Boolean/String,字符串即是缓存文件存放的路径uglifyOptions: {warnings: false,output: {comments: false,   // 使输出的代码尽可能紧凑beautify: false  // 输出删掉所有注释},compress: {drop_console: true, // 过滤console,即使写了console,线上也不显示drop_debugger: true,// warnings:false// UglifyJs版本跟这个没对应上}}}),new OptimizeCSSAssetsPlugin({assetNameRegExp: /\.(less)|(css)$/g,cssProcessor: require('cssnano'), // 用这个压缩过后更小cssProcessorOptions: {safe: true,discardComments: { removeAll: true }, // 移除注释normalizeUnicode: false // 建议false,否则在使用unicode-range的时候会产生乱码},canPrint: true}),]},
})

然后这是我练习得一个demo

通过自己练习比别人讲得要很多,别人讲得再好也是别人得，毕竟笨鸟在于勤于补拙。

参考：掘金

demo地址：github