当前位置：首页 > 其他问题 > webpack 的一些配置理解

webpack 的一些配置理解

王丛4年前 (2021-04-27)其他问题685

自己根据视频敲的代码 已经上传到gitee 在这记录一下 为了自己理解 每一个代码都加上自己的理解注释 ，**重点注重webpack 的版本问题**
--------------------------------------------------------------------------

<div> </div><div id="LC1">const { resolve ,join} = require('path');</div><div id="LC2">const HtmlWebpackPlugin = require('html-webpack-plugin');//处理html资源</div><div id="LC3">const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');//对css进行优化</div><div id="LC4">const MiniCssExtractPlugin = require('mini-css-extract-plugin');//处理css资源</div><div id="LC5">const PurgecssPlugin = require('purgecss-webpack-plugin');//处理css无用是代码</div><div id="LC6">const glob=require('glob');</div><div id="LC7">const PATHS={src:join(__dirname,'src')};</div><div id="LC8">// 还需要在package.json中定义browserslist 进行浏览器兼容设置</div><div id="LC9">const commonCssLoader = [//从右到左</div><div id="LC10">MiniCssExtractPlugin.loader,//提取成一个新文件加载</div><div id="LC11">'css-loader',//打包css</div><div id="LC12">'postcss-loader'//CSS进行浏览器兼容处理</div><div id="LC13">];</div><div id="LC14"></div><div id="LC15">module.exports = {</div><div id="LC16">// entry: ['./src/js/main.js','./src/index.html'], 热替换 只更新html</div><div id="LC17">entry: './src/js/main.js',</div><div id="LC18">output: {</div><div id="LC19">filename: 'built.js',</div><div id="LC20">path: resolve(__dirname, 'build')//__dirnamed当前目录的意思 ，在当前目录创建build文件</div><div id="LC21">},</div><div id="LC22">module: {</div><div id="LC23">rules: [</div><div id="LC24">{</div><div id="LC25">test: /\.css$/,</div><div id="LC26">//开发环境中使用 热替换 use: ['style-loader', 'css-loader','postcss-loader']</div><div id="LC27">use: [...commonCssLoader]</div><div id="LC28">},</div><div id="LC29">{</div><div id="LC30">test: /\.less$/,</div><div id="LC31">use: [...commonCssLoader, 'less-loader']</div><div id="LC32">},</div><div id="LC33">{</div><div id="LC34">test: /\.scss$/,</div><div id="LC35">use: ['style-loader', 'css-loader','less-loader','sass-loder']</div><div id="LC36">},</div><div id="LC37"></div><div id="LC38">{</div><div id="LC39">test: /\.(jpg|png|gif)/,</div><div id="LC40">loader: 'url-loader',</div><div id="LC41">options: {//对图片进行优化</div><div id="LC42">limit: 8 * 1024,</div><div id="LC43">name: '[hash:10].[ext]',</div><div id="LC44">outputPath: 'imgs',</div><div id="LC45">esModule: false</div><div id="LC46">}</div><div id="LC47">},</div><div id="LC48">{</div><div id="LC49">test: /\.js$/,</div><div id="LC50">exclude:/node_modules/,</div><div id="LC51">loader:'eslint-loader' ,//对js语法进行检查 修复</div><div id="LC52">options:{</div><div id="LC53">fix:true</div><div id="LC54">}</div><div id="LC55">},</div><div id="LC56">{</div><div id="LC57">test: /\.html$/,</div><div id="LC58">loader: 'html-loader',</div><div id="LC59">options:{</div><div id="LC60">esModule: false</div><div id="LC61">}</div><div id="LC62">},</div><div id="LC63">{</div><div id="LC64">exclude: /\.(js|css|less|html|jpg|png|gif)/, //进行排除</div><div id="LC65">loader: 'file-loader',</div><div id="LC66">options: {</div><div id="LC67">outputPath: 'media'</div><div id="LC68">}</div><div id="LC69">}</div><div id="LC70">]</div><div id="LC71"></div><div id="LC72">},</div><div id="LC73"></div><div id="LC74">plugins: [</div><div id="LC75">new MiniCssExtractPlugin({</div><div id="LC76">filename: 'built.css'//生成一个新的css压缩文件</div><div id="LC77">}),</div><div id="LC78">new OptimizeCssAssetsWebpackPlugin(),</div><div id="LC79"></div><div id="LC80">new PurgecsPlugin({</div><div id="LC81">paths:glob.sync('${PATHS.src}/**/*',{nodir:true}),</div><div id="LC82">}),</div><div id="LC83">new HtmlWebpackPlugin({</div><div id="LC84">template: './index.html',//按index模板进行压碎</div><div id="LC85">//filename可是设置压缩的名字,</div><div id="LC86">//chunks：[] 可以设置需要加载</div><div id="LC87">minify: {//对html进行压缩</div><div id="LC88">collapseWhitespace: true,//移除空格</div><div id="LC89">removeComments: true //移除注释</div><div id="LC90">}</div><div id="LC91">})</div><div id="LC92">],</div><div id="LC93">mode: 'development',</div><div id="LC94">target:'web',</div><div id="LC95">// 开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器~~）</div><div id="LC96">// 特点：只会在内存中编译打包，不会有任何输出</div><div id="LC97">// 启动devServer指令为：npx webpack-dev-server</div><div id="LC98">devServer: {</div><div id="LC99">// 项目构建后路径</div><div id="LC100">contentBase: resolve(__dirname, 'build'),</div><div id="LC101">// 启动gzip压缩</div><div id="LC102">compress: true,</div><div id="LC103">// 端口号</div><div id="LC104">port: 3000,</div><div id="LC105">// 自动打开浏览器</div><div id="LC106">open: true,</div><div id="LC107">hot:true//模块热替换 哪个模块改动就更新那个模块 不用完全更新</div><div id="LC108">}</div><div id="LC109">};</div>

打赏