充电男 發表於 2019-8-18 23:13:00

从零配置webpack(react+less+typescript+mobx)

<blockquote>
<h3>本文目标</h3>
<p>从零搭建出一套支持react+less+typescript+mobx的webpack配置</p>
</blockquote>
<p>&nbsp;</p>
<h3 id="cdlTO">最简化webpack配置</h3>
<p>&nbsp;</p>
<p>首页要初始化yarn和安装webpack的依赖</p>
<p>&nbsp;</p>
<div id="01sgk" class="lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22shell%22%2C%22code%22%3A%22yarn%20init%20-y%5Cnyarn%20add%20webpack%20webpack-cli%20-D%22%2C%22id%22%3A%2201sgk%22%7D">
<div class="lake-codeblock-content">
<div class="CodeMirror">
<div class="cnblogs_code">
<pre>yarn init -<span style="color: rgba(0, 0, 0, 1)">y
yarn add webpack webpack</span>-cli -D</pre>
</div>
<p>&nbsp;</p>
</div>
</div>
</div>
<p>&nbsp;</p>
<p>根目录下新建webpack.config.js文件，内容如下</p>
<p>&nbsp;</p>
<div id="GKGFF" class="lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22javascript%22%2C%22code%22%3A%22const%20path%20%3D%20require('path')%3B%5Cn%5Cnmodule.exports%20%3D%20%7B%5Cn%20%20%20%20mode%3A%20'development'%2C%5Cn%20%20%20%20%2F%2F%20%E5%85%A5%E5%8F%A3%20%E8%BF%99%E9%87%8C%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F%E5%BC%80%E5%A7%8B%E6%89%A7%E8%A1%8C%5Cn%20%20%20%20entry%3A%20path.resolve(__dirname%2C%20'src%2Findex.tsx')%2C%5Cn%20%20%20%20%2F%2F%20%E5%87%BA%E5%8F%A3%20%5Cn%20%20%20%20output%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%2F%2F%20%E8%BE%93%E5%87%BA%E6%96%87%E4%BB%B6%E7%9A%84%E7%9B%AE%E6%A0%87%E8%B7%AF%E5%BE%84%5Cn%20%20%20%20%20%20%20%20path%3A%20path.resolve(__dirname%2C%20'dist')%2C%5Cn%20%20%20%20%20%20%20%20%2F%2F%20%E8%BE%93%E5%87%BA%E7%9A%84%E6%96%87%E4%BB%B6%E5%90%8D%5Cn%20%20%20%20%20%20%20%20filename%3A%20'bundle.js'%2C%5Cn%20%20%20%20%20%20%20%20%2F%2F%20%E8%BE%93%E5%87%BA%E8%A7%A3%E6%9E%90%E6%96%87%E4%BB%B6%E7%9A%84%E7%9B%AE%E5%BD%95%E3%80%82%E9%9D%99%E6%80%81%E8%B5%84%E6%BA%90%E6%9C%80%E7%BB%88%E8%AE%BF%E9%97%AE%E8%B7%AF%E5%BE%84%20%3D%20output.publicPath%20%2B%20%E8%B5%84%E6%BA%90loader%E6%88%96%E6%8F%92%E4%BB%B6%E7%AD%89%E9%85%8D%E7%BD%AE%E8%B7%AF%E5%BE%84%5Cn%20%20%20%20%20%20%20%20publicPath%3A%20'%2F'%5Cn%20%20%20%20%7D%5Cn%7D%22%2C%22id%22%3A%22GKGFF%22%7D">
<div class="lake-codeblock-content">
<div class="CodeMirror">
<div class="cnblogs_code">
<pre>const path = require('path'<span style="color: rgba(0, 0, 0, 1)">);

module.exports </span>=<span style="color: rgba(0, 0, 0, 1)"> {
    mode: </span>'development'<span style="color: rgba(0, 0, 0, 1)">,
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 入口 这里应用程序开始执行</span>
    entry: path.resolve(__dirname, 'src/index.tsx'<span style="color: rgba(0, 0, 0, 1)">),
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 出口 </span>
<span style="color: rgba(0, 0, 0, 1)">    output: {
      </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 输出文件的目标路径</span>
      path: path.resolve(__dirname, 'dist'<span style="color: rgba(0, 0, 0, 1)">),
      </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 输出的文件名</span>
      filename: 'bundle.js'<span style="color: rgba(0, 0, 0, 1)">,
      </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 输出解析文件的目录。静态资源最终访问路径 = output.publicPath + 资源loader或插件等配置路径</span>
      publicPath: '/'<span style="color: rgba(0, 0, 0, 1)">
    }
}</span></pre>
</div>
<p>&nbsp;</p>
</div>
</div>
</div>
<p>&nbsp;</p>
<p>使用命令进行打包</p>
<p>&nbsp;</p>
<div id="9gVHK" class="lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22shell%22%2C%22code%22%3A%22webpack%20--mode%20production%22%2C%22id%22%3A%229gVHK%22%7D">
<div class="lake-codeblock-content">
<div class="CodeMirror">
<div class="cnblogs_code">
<pre>webpack --mode production</pre>
</div>
<p>&nbsp;</p>
</div>
</div>
</div>
<p>&nbsp;</p>
<p>另外亦可以将命令配置到<span class="lake-fontsize-11">&nbsp;package.json 中的 scripts 字段</span></p>
<p><span class="lake-fontsize-11">&nbsp;</span></p>
<div id="Ulg9l" class="lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22shell%22%2C%22code%22%3A%22%5C%22scripts%5C%22%3A%20%7B%5Cn%5Ct%5Ct%5C%22build%5C%22%3A%20%5C%22webpack%20--mode%20production%5C%22%5Cn%7D%2C%22%2C%22id%22%3A%22Ulg9l%22%7D">
<div class="lake-codeblock-content">
<div class="CodeMirror">
<div class="cnblogs_code">
<pre>"scripts"<span style="color: rgba(0, 0, 0, 1)">: {
    </span>"build": "webpack --mode production"<span style="color: rgba(0, 0, 0, 1)">
},</span></pre>
</div>
<p>&nbsp;</p>
</div>
</div>
</div>
<p>&nbsp;</p>
<p>执行命令 yarn build 即可打包</p>
<p>&nbsp;</p>
<h3 id="D44hC">使用模版html</h3>
<p>&nbsp;</p>
<p><span class="lake-fontsize-11">html-webpack-plugin 插件 可以指定template模板文件，将会在output目录下，生成html文件，并引入打包后的js.</span></p>
<p><span class="lake-fontsize-11">&nbsp;</span></p>
<p><span class="lake-fontsize-11">安装依赖</span></p>
<p><span class="lake-fontsize-11">&nbsp;</span></p>
<div id="zLozt" class="lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22shell%22%2C%22code%22%3A%22yarn%20add%20html-webpack-plugin%20-D%22%2C%22id%22%3A%22zLozt%22%7D">
<div class="lake-codeblock-content">
<div class="CodeMirror">
<div class="cnblogs_code">
<pre>yarn add html-webpack-plugin -D</pre>
</div>
<p>&nbsp;</p>
</div>
</div>
</div>
<p>&nbsp;</p>
<p>在webpack.config.js增加plugins配置</p>
<p>&nbsp;</p>
<div id="fk82l" class="lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22javascript%22%2C%22code%22%3A%22const%20HtmlWebpackPlugin%20%3D%20require('html-webpack-plugin')%3B%5Cnmodule.exports%20%3D%20%7B%5Cn%20%20%20%20%2F%2F...other%20code%5Cn%20%20%20%20plugins%3A%20%5B%5Cn%20%20%20%20%20%20%20%20new%20HtmlWebpackPlugin(%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20template%3A%20path.resolve(__dirname%2C%20'src%2Findex.html')%5Cn%20%20%20%20%20%20%20%20%7D)%5Cn%20%20%20%20%5D%5Cn%7D%22%2C%22id%22%3A%22fk82l%22%7D">
<div class="lake-codeblock-content">
<div class="CodeMirror">
<div class="cnblogs_code">
<pre>const HtmlWebpackPlugin = require('html-webpack-plugin'<span style="color: rgba(0, 0, 0, 1)">);
module.exports </span>=<span style="color: rgba(0, 0, 0, 1)"> {
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">...other code</span>
<span style="color: rgba(0, 0, 0, 1)">    plugins: [
      </span><span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> HtmlWebpackPlugin({
            template: path.resolve(__dirname, </span>'src/index.html'<span style="color: rgba(0, 0, 0, 1)">)
      })
    ]
}</span></pre>
</div>
<p>&nbsp;</p>
</div>
</div>
</div>
<p>&nbsp;</p>
<p>html-webpack-plugin 插件 还支持title、minify、filename等其他参数</p>
<p>&nbsp;</p>
<h3 id="IcB04">配置webpack-dev-server</h3>
<p>&nbsp;</p>
<p><span class="lake-fontsize-11">webpack-dev-server提供了一个简单的Web服务器和实时热更新的能力，有助于开发。</span></p>
<p>&nbsp;</p>
<p>安装依赖</p>
<p>&nbsp;</p>
<div id="pwy4M" class="lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22shell%22%2C%22code%22%3A%22yarn%20add%20webpack-dev-server%20-D%22%2C%22id%22%3A%22pwy4M%22%7D">
<div class="lake-codeblock-content">
<div class="CodeMirror">
<div class="cnblogs_code">
<pre>yarn add webpack-dev-server -D</pre>
</div>
<p>&nbsp;</p>
</div>
</div>
</div>
<p>&nbsp;</p>
<p>在webpack.config.js中增加devServer配置</p>
<p>&nbsp;</p>
<div id="8pIfX" class="lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22javascript%22%2C%22code%22%3A%22const%20path%20%3D%20require('path')%3B%5Cnconst%20HtmlWebpackPlugin%20%3D%20require('html-webpack-plugin')%3B%5Cnmodule.exports%20%3D%20%7B%5Cn%20%20%20%20%2F%2F...other%20code%5Cn%20%20%20%20devServer%3A%20%7B%5Cn%20%20%20%20%20%20%20%20hot%3A%20true%2C%5Cn%20%20%20%20%20%20%20%20port%3A%203000%2C%5Cn%20%20%20%20%20%20%20%20open%3A%20true%2C%5Cn%20%20%20%20%20%20%20%20contentBase%3A%20path.resolve(__dirname%2C%20'dist')%2C%5Cn%20%20%20%20%20%20%20%20%2F%2F%20%E5%BC%80%E5%8F%91%E6%A8%A1%E5%BC%8F%E4%B8%8B%E5%86%99%2F%E5%B0%B1%E8%A1%8C%E5%95%A6%5Cn%20%20%20%20%20%20%20%20publicPath%3A%20'%2F'%2C%5Cn%20%20%20%20%7D%5Cn%7D%22%2C%22id%22%3A%228pIfX%22%7D">
<div class="lake-codeblock-content">
<div class="CodeMirror">
<div class="cnblogs_code">
<pre>const path = require('path'<span style="color: rgba(0, 0, 0, 1)">);
const HtmlWebpackPlugin </span>= require('html-webpack-plugin'<span style="color: rgba(0, 0, 0, 1)">);
module.exports </span>=<span style="color: rgba(0, 0, 0, 1)"> {
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">...other code</span>
<span style="color: rgba(0, 0, 0, 1)">    devServer: {
      hot: </span><span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
      port: </span>3000<span style="color: rgba(0, 0, 0, 1)">,
      open: </span><span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
      contentBase: path.resolve(__dirname, </span>'dist'<span style="color: rgba(0, 0, 0, 1)">),
      </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 开发模式下写/就行啦</span>
      publicPath: '/'<span style="color: rgba(0, 0, 0, 1)">,
    }
}</span></pre>
</div>
<p>&nbsp;</p>
</div>
</div>
</div>
<p>&nbsp;</p>
<p><span class="lake-fontsize-11">在 package.json 的 scripts 字段中增加 start模式&nbsp;</span></p>
<p>&nbsp;</p>
<div id="QLvtZ" class="lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22shell%22%2C%22code%22%3A%22%5C%22scripts%5C%22%3A%20%7B%5Cn%5Ct%5Ct%5C%22start%5C%22%3A%20%5C%22webpack-dev-server%20--mode%20development%5C%22%2C%5Cn%5Ct%5Ct%5C%22build%5C%22%3A%20%5C%22webpack%20--mode%20production%5C%22%5Cn%7D%2C%22%2C%22id%22%3A%22QLvtZ%22%7D">
<div class="lake-codeblock-content">
<div class="CodeMirror">
<div class="cnblogs_code">
<pre>"scripts"<span style="color: rgba(0, 0, 0, 1)">: {
    </span>"start": "webpack-dev-server --mode development"<span style="color: rgba(0, 0, 0, 1)">,
    </span>"build": "webpack --mode production"<span style="color: rgba(0, 0, 0, 1)">
},</span></pre>
</div>
<p>&nbsp;</p>
</div>
</div>
</div>
<p>&nbsp;</p>
<p>这样我们就可以通过yarn start来启动服务啦</p>
<p>&nbsp;</p>
<p>官网devServer</p>
<p>&nbsp;</p>
<p>链接Webpack中publicPath详解</p>
<p>&nbsp;</p>
<h3 id="uFaD9">支持加载css文件</h3>
<p>&nbsp;</p>
<p><span class="lake-fontsize-11">通过使用不同的 style-loader 和 css-loader, 可以将 css 文件转换成js&nbsp; &nbsp;&nbsp;文件类型。</span></p>
<p><span class="lake-fontsize-11">&nbsp;</span></p>
<p>安装依赖</p>
<p>&nbsp;</p>
<div id="wooTb" class="lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22shell%22%2C%22code%22%3A%22yarn%20add%20style-loader%20css-loader%20-D%22%2C%22id%22%3A%22wooTb%22%7D">
<div class="lake-codeblock-content">
<div class="CodeMirror">
<div class="cnblogs_code">
<pre>yarn add style-loader css-loader -D</pre>
</div>
<p>&nbsp;</p>
</div>
</div>
</div>
<p>&nbsp;</p>
<p>在webpack.config.js中增加loader配置</p>
<p>&nbsp;</p>
<div id="aGVEg" class="lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22javascript%22%2C%22code%22%3A%22module.exports%20%3D%20%7B%5Cn%20%20%20%20%2F%2Fother%20code%5Cn%20%20%20%20module%3A%20%7B%5Cn%20%20%20%20%20%20%20%20rules%3A%20%5B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20test%3A%20%2F%5C%5C.css%2F%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20use%3A%20%5B'style-loader'%2C%20'css-loader'%5D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20exclude%3A%20%2Fnode_modules%2F%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20include%3A%20path.resolve(__dirname%2C%20'src')%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%5D%5Cn%20%20%20%20%7D%5Cn%7D%22%2C%22id%22%3A%22aGVEg%22%7D">
<div class="lake-codeblock-content">
<div class="CodeMirror">
<div class="cnblogs_code">
<pre>module.exports =<span style="color: rgba(0, 0, 0, 1)"> {
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">other code</span>
<span style="color: rgba(0, 0, 0, 1)">    module: {
      rules: [
            {
                test: </span>/\.css/<span style="color: rgba(0, 0, 0, 1)">,
                use: [</span>'style-loader', 'css-loader'<span style="color: rgba(0, 0, 0, 1)">],
                exclude: </span>/node_modules/<span style="color: rgba(0, 0, 0, 1)">,
                include: path.resolve(__dirname, </span>'src'<span style="color: rgba(0, 0, 0, 1)">)
            }
      ]
    }
}</span></pre>
</div>
<p>&nbsp;</p>
</div>
</div>
</div>
<p>&nbsp;</p>
<p>loader 可以配置以下参数:</p>
<ul>
<li>test: 匹配处理文件的扩展名的正则表达式</li>
<li>use: loader名称</li>
<li>include/exclude: 手动指定必须处理的文件夹或屏蔽不需要处理的文件夹</li>
<li>query: 为loader提供额外的设置选项</li>
</ul>
<p>&nbsp;</p>
<h3 id="5RdgW">支持图片加载</h3>
<p>&nbsp;</p>
<p>需要引入两个loader</p>
<ul>
<li>file-loader: 解决CSS等文件中的引入图片路径问题</li>
<li>url-loader: 当图片小于limit的时候会把图片Base64编码，大于limit参数的时候还是使用file-loader进行拷贝</li>
</ul>
<p>&nbsp;</p>
<p><strong>如果希望图片存放在单独的目录下，那么需要指定outputPath</strong></p>
<p><strong>&nbsp;</strong></p>
<p>安装依赖</p>
<p>&nbsp;</p>
<div id="Z5yR6" class="lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22shell%22%2C%22code%22%3A%22yarn%20add%20url-loader%20file-loader%20-D%22%2C%22id%22%3A%22Z5yR6%22%7D">
<div class="lake-codeblock-content">
<div class="CodeMirror">
<div class="cnblogs_code">
<pre>yarn add url-loader file-loader -D</pre>
</div>
<p>&nbsp;</p>
</div>
</div>
</div>
<p>&nbsp;</p>
<p><span class="lake-fontsize-11">在 webpack.config.js 中增加 loader 的配置(增加在 module.rules 的数组中)。</span></p>
<p><span class="lake-fontsize-11">&nbsp;</span></p>
<div id="HauMh" class="lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22javascript%22%2C%22code%22%3A%22module.exports%20%3D%20%7B%5Cn%20%20%20%20%2F%2Fother%20code%5Cn%20%20%20%20module%3A%20%7B%5Cn%20%20%20%20%20%20%20%20rules%3A%20%5B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20test%3A%20%2F%5C%5C.(gif%7Cjpg%7Cpng%7Cbmp%7Ceot%7Cwoff%7Cwoff2%7Cttf%7Csvg)%2F%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20use%3A%20%5B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20loader%3A%20'url-loader'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20options%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20limit%3A%208192%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20outputPath%3A%20'images'%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%5D%5Cn%20%20%20%20%7D%5Cn%7D%20%22%2C%22id%22%3A%22HauMh%22%7D">
<div class="lake-codeblock-content">
<div class="CodeMirror">
<div class="cnblogs_code">
<pre>module.exports =<span style="color: rgba(0, 0, 0, 1)"> {
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">other code</span>
<span style="color: rgba(0, 0, 0, 1)">    module: {
      rules: [
            {
                test: </span>/\.(gif|jpg|png|bmp|eot|woff|woff2|ttf|svg)/<span style="color: rgba(0, 0, 0, 1)">,
                use: [
                  {
                        loader: </span>'url-loader'<span style="color: rgba(0, 0, 0, 1)">,
                        options: {
                            limit: </span>8192<span style="color: rgba(0, 0, 0, 1)">,
                            outputPath: </span>'images'<span style="color: rgba(0, 0, 0, 1)">
                        }
                  }
                ]
            }
      ]
    }
} </span></pre>
</div>
<p>&nbsp;</p>
</div>
</div>
</div>
<p><span class="lake-fontsize-11">&nbsp;</span></p>
<h3 id="YdAPd">支持编译less</h3>
<p>&nbsp;</p>
<p>很多前端都喜欢写less，所以支持less也是需要的。（sass配置方法基本相同）</p>
<p>&nbsp;</p>
<p>安装依赖</p>
<p>&nbsp;</p>
<div id="9xTfn" class="lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22shell%22%2C%22code%22%3A%22yarn%20add%20less%20less-loader%20-D%22%2C%22id%22%3A%229xTfn%22%7D">
<div class="lake-codeblock-content">
<div class="CodeMirror">
<div class="cnblogs_code">
<pre>yarn add less less-loader -D</pre>
</div>
<p>&nbsp;</p>
</div>
</div>
</div>
<p>&nbsp;</p>
<p><span class="lake-fontsize-11">在 webpack.config.js 中增加 loader 的配置(module.rules 数组中)。</span></p>
<p><span class="lake-fontsize-11">&nbsp;</span></p>
<div id="5ROEP" class="lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22javascript%22%2C%22code%22%3A%22module.exports%20%3D%20%7B%5Cn%20%20%20%20%2F%2Fother%20code%5Cn%20%20%20%20module%3A%20%7B%5Cn%20%20%20%20%20%20%20%20rules%3A%20%5B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20test%3A%20%2F%5C%5C.less%2F%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20use%3A%20%5B'style-loader'%2C%20'css-loader'%2C%20'less-loader'%5D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20exclude%3A%20%2Fnode_modules%2F%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20include%3A%20path.resolve(__dirname%2C%20'src')%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%5D%5Cn%20%20%20%20%7D%5Cn%7D%20%20%20%20%20%20%20%20%22%2C%22id%22%3A%225ROEP%22%7D">
<div class="lake-codeblock-content">
<div class="CodeMirror">
<div class="cnblogs_code">
<pre>module.exports =<span style="color: rgba(0, 0, 0, 1)"> {
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">other code</span>
<span style="color: rgba(0, 0, 0, 1)">    module: {
      rules: [
            {
                test: </span>/\.less/<span style="color: rgba(0, 0, 0, 1)">,
                use: [</span>'style-loader', 'css-loader', 'less-loader'<span style="color: rgba(0, 0, 0, 1)">],
                exclude: </span>/node_modules/<span style="color: rgba(0, 0, 0, 1)">,
                include: path.resolve(__dirname, </span>'src'<span style="color: rgba(0, 0, 0, 1)">)
            },
      ]
    }
}      </span></pre>
</div>
<p>&nbsp;</p>
<pre class="cm-s-default"><span style="font-family: &quot;PingFang SC&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 14px">&nbsp;</span></pre>
</div>
</div>
</div>
<h3 id="8iLTi">支持转义 ES6/ES7/JSX(react)</h3>
<p>&nbsp;</p>
<p><span class="lake-fontsize-11">安装ES6/ES7/JSX 转义需要 Babel 的依赖，支持装饰器。</span></p>
<p><span class="lake-fontsize-11">&nbsp;</span></p>
<div id="om9ID" class="lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22shell%22%2C%22code%22%3A%22yarn%20add%20%40babel%2Fcore%20babel-loader%20%40babel%2Fpreset-env%20%40babel%2Fpreset-react%20%40babel%2Fplugin-proposal-decorators%20%40babel%2Fplugin-proposal-object-rest-spread%20-D%22%2C%22id%22%3A%22om9ID%22%7D">
<div class="lake-codeblock-content">
<div class="CodeMirror">
<div class="cnblogs_code">
<pre>yarn add @babel/core babel-loader @babel/preset-env @babel/preset-react @babel/plugin-proposal-decorators @babel/plugin-proposal-object-rest-spread -D</pre>
</div>
<p>&nbsp;</p>
</div>
</div>
</div>
<p>&nbsp;</p>
<p>在 webpack.config.js 中增加 loader 的配置(module.rules 数组中)。</p>
<p>&nbsp;</p>
<div id="GIGjH" class="lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22javascript%22%2C%22code%22%3A%22module.exports%20%3D%20%7B%5Cn%20%20%20%20%2F%2Fother%20code%5Cn%20%20%20%20module%3A%20%7B%5Cn%20%20%20%20%20%20%20%20rules%3A%20%5B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20test%3A%20%2F%5C%5C.jsx%3F%24%2F%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20use%3A%20%5B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20loader%3A%20'babel-loader'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20options%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20presets%3A%20%5B'%40babel%2Fpreset-env'%2C%20'%40babel%2Freact'%5D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20plugins%3A%20%5B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5Ct%5C%22%40babel%2Fplugin-proposal-decorators%5C%22%2C%20%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5Ct%7B%20%5C%22legacy%5C%22%3A%20true%20%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20include%3A%20path.resolve(__dirname%2C%20'src')%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20exclude%3A%20%2Fnode_modules%2F%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%5D%5Cn%20%20%20%20%7D%5Cn%7D%22%2C%22id%22%3A%22GIGjH%22%7D">
<div class="lake-codeblock-content">
<div class="CodeMirror">
<div class="cnblogs_code">
<pre>module.exports =<span style="color: rgba(0, 0, 0, 1)"> {
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">other code</span>
<span style="color: rgba(0, 0, 0, 1)">    module: {
      rules: [
            {
                test: </span>/\.jsx?$/<span style="color: rgba(0, 0, 0, 1)">,
                use: [
                  {
                        loader: </span>'babel-loader'<span style="color: rgba(0, 0, 0, 1)">,
                        options: {
                            presets: [</span>'@babel/preset-env', '@babel/react'<span style="color: rgba(0, 0, 0, 1)">],
                            plugins: [
                              [
                                  </span>"@babel/plugin-proposal-decorators"<span style="color: rgba(0, 0, 0, 1)">,
                                  { </span>"legacy": <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)"> }
                              ]
                            ]
                        }
                  }
                ],
                include: path.resolve(__dirname, </span>'src'<span style="color: rgba(0, 0, 0, 1)">),
                exclude: </span>/node_modules/<span style="color: rgba(0, 0, 0, 1)">
            },
      ]
    }
}</span></pre>
</div>
<p>&nbsp;</p>
</div>
</div>
</div>
<p>&nbsp;</p>
<h3 id="G26dY">压缩JS文件</h3>
<p>&nbsp;</p>
<p>安装依赖</p>
<p>&nbsp;</p>
<div id="D0uNP" class="lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22shell%22%2C%22code%22%3A%22yarn%20add%20uglifyjs-webpack-plugin%20-D%22%2C%22id%22%3A%22D0uNP%22%7D">
<div class="lake-codeblock-content">
<div class="CodeMirror">
<div class="cnblogs_code">
<pre>yarn add uglifyjs-webpack-plugin -D</pre>
</div>
<p>&nbsp;</p>
</div>
</div>
</div>
<p>&nbsp;</p>
<p><span class="lake-fontsize-11">在 webpack.config.js 中增加 optimization 的配置</span></p>
<p><span class="lake-fontsize-11">&nbsp;</span></p>
<div id="Du6aQ" class="lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22javascript%22%2C%22code%22%3A%22const%20UglifyWebpackPlugin%20%3D%20require('uglifyjs-webpack-plugin')%3B%5Cn%5Cnmodule.exports%20%3D%20%7B%5Cn%20%20%20%20%2F%2Fother%20code%5Cn%20%20%20%20optimization%3A%20%7B%5Cn%20%20%20%20%20%20%20%20minimizer%3A%20%5B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20new%20UglifyWebpackPlugin(%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20parallel%3A%204%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7D)%5Cn%20%20%20%20%20%20%20%20%5D%5Cn%20%20%20%20%7D%5Cn%7D%22%2C%22id%22%3A%22Du6aQ%22%7D">
<div class="lake-codeblock-content">
<div class="CodeMirror">
<div class="cnblogs_code">
<pre>const UglifyWebpackPlugin = require('uglifyjs-webpack-plugin'<span style="color: rgba(0, 0, 0, 1)">);

module.exports </span>=<span style="color: rgba(0, 0, 0, 1)"> {
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">other code</span>
<span style="color: rgba(0, 0, 0, 1)">    optimization: {
      minimizer: [
            </span><span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> UglifyWebpackPlugin({
                parallel: </span>4<span style="color: rgba(0, 0, 0, 1)">
            })
      ]
    }
}</span></pre>
</div>
<p>&nbsp;</p>
</div>
</div>
</div>
<p>&nbsp;</p>
<h3 id="XTdWw">分离出CSS</h3>
<p>&nbsp;</p>
<p><span class="lake-fontsize-11">因为CSS的下载和JS可以并行，当一个HTML文件很大的时候，可以把CSS单独提取出来加载</span></p>
<p><span class="lake-fontsize-11">&nbsp;</span></p>
<p><span class="lake-fontsize-11">安装依赖</span></p>
<p><span class="lake-fontsize-11">&nbsp;</span></p>
<div id="TWVOa" class="lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22shell%22%2C%22code%22%3A%22yarn%20add%20mini-css-extract-plugin%20-D%22%2C%22id%22%3A%22TWVOa%22%7D">
<div class="lake-codeblock-content">
<div class="CodeMirror">
<div class="cnblogs_code">
<pre>yarn add mini-css-extract-plugin -D</pre>
</div>
<p>&nbsp;</p>
</div>
</div>
</div>
<p>&nbsp;</p>
<p>在 webpack.config.js 中增加 plugins 的配置,并且将 'style-loader' 修改为 { loader: MiniCssExtractPlugin.loader}。CSS打包在单独目录，那么配置filename。</p>
<p>&nbsp;</p>
<div id="QiWqn" class="lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22javascript%22%2C%22code%22%3A%22const%20MiniCssExtractPlugin%20%3D%20require('mini-css-extract-plugin')%3B%5Cn%5Cnmodule.exports%20%3D%20%7B%5Cn%20%20%20%20%2F%2Fother%20code%5Cn%20%20%20%20module%3A%20%7B%5Cn%20%20%20%20%20%20%20%20rules%3A%20%5B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20test%3A%20%2F%5C%5C.css%2F%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20use%3A%20%5B%7B%20loader%3A%20MiniCssExtractPlugin.loader%7D%2C%20'css-loader'%5D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20exclude%3A%20%2Fnode_modules%2F%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20include%3A%20path.resolve(__dirname%2C%20'src')%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20test%3A%20%2F%5C%5C.less%2F%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20use%3A%20%5B%7B%20loader%3A%20MiniCssExtractPlugin.loader%20%7D%2C%20'css-loader'%2C%20'less-loader'%5D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20exclude%3A%20%2Fnode_modules%2F%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20include%3A%20path.resolve(__dirname%2C%20'src')%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%5D%5Cn%20%20%20%20%7D%2C%5Cn%20%20%20%20plugins%3A%20%5B%5Cn%20%20%20%20%20%20%20%20new%20MiniCssExtractPlugin(%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20filename%3A%20'css%2F%5Bname%5D.css'%5Cn%20%20%20%20%20%20%20%20%7D)%5Cn%20%20%20%20%5D%5Cn%7D%22%2C%22id%22%3A%22QiWqn%22%7D">
<div class="lake-codeblock-content">
<div class="CodeMirror">
<div class="cnblogs_code">
<pre>const MiniCssExtractPlugin = require('mini-css-extract-plugin'<span style="color: rgba(0, 0, 0, 1)">);

module.exports </span>=<span style="color: rgba(0, 0, 0, 1)"> {
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">other code</span>
<span style="color: rgba(0, 0, 0, 1)">    module: {
      rules: [
            {
                test: </span>/\.css/<span style="color: rgba(0, 0, 0, 1)">,
                use: [{ loader: MiniCssExtractPlugin.loader}, </span>'css-loader'<span style="color: rgba(0, 0, 0, 1)">],
                exclude: </span>/node_modules/<span style="color: rgba(0, 0, 0, 1)">,
                include: path.resolve(__dirname, </span>'src'<span style="color: rgba(0, 0, 0, 1)">)
            },
            {
                test: </span>/\.less/<span style="color: rgba(0, 0, 0, 1)">,
                use: [{ loader: MiniCssExtractPlugin.loader }, </span>'css-loader', 'less-loader'<span style="color: rgba(0, 0, 0, 1)">],
                exclude: </span>/node_modules/<span style="color: rgba(0, 0, 0, 1)">,
                include: path.resolve(__dirname, </span>'src'<span style="color: rgba(0, 0, 0, 1)">)
            },
      ]
    },
    plugins: [
      </span><span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> MiniCssExtractPlugin({
            filename: </span>'css/.css'<span style="color: rgba(0, 0, 0, 1)">
      })
    ]
}</span></pre>
</div>
<p>&nbsp;</p>
</div>
</div>
</div>
<p>&nbsp;</p>
<h3 id="lfvso">压缩CSS文件</h3>
<p>&nbsp;</p>
<p>安装依赖</p>
<p>&nbsp;</p>
<div id="ZKFlD" class="lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22shell%22%2C%22code%22%3A%22yarn%20add%20optimize-css-assets-webpack-plugin%20-D%22%2C%22id%22%3A%22ZKFlD%22%7D">
<div class="lake-codeblock-content">
<div class="CodeMirror">
<div class="cnblogs_code">
<pre>yarn add optimize-css-assets-webpack-plugin -D</pre>
</div>
<p>&nbsp;</p>
</div>
</div>
</div>
<p>&nbsp;</p>
<p><span class="lake-fontsize-11">在 webpack.config.js 中的 optimization 中增加配置</span></p>
<p><span class="lake-fontsize-11">&nbsp;</span></p>
<div id="iX2Wk" class="lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22javascript%22%2C%22code%22%3A%22const%20OptimizeCssAssetsWebpackPlugin%20%3D%20require('optimize-css-assets-webpack-plugin')%3B%5Cn%5Cnmodule.exports%20%3D%20%7B%5Cn%20%20%20%20%2F%2Fother%20code%5Cn%20%20%20%20optimization%3A%20%7B%5Cn%20%20%20%20%20%20%20%20minimizer%3A%20%5B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20new%20OptimizeCssAssetsWebpackPlugin()%5Cn%20%20%20%20%20%20%20%20%5D%5Cn%20%20%20%20%7D%5Cn%7D%22%2C%22id%22%3A%22iX2Wk%22%7D">
<div class="lake-codeblock-content">
<div class="CodeMirror">
<div class="cnblogs_code">
<pre>const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin'<span style="color: rgba(0, 0, 0, 1)">);

module.exports </span>=<span style="color: rgba(0, 0, 0, 1)"> {
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">other code</span>
<span style="color: rgba(0, 0, 0, 1)">    optimization: {
      minimizer: [
            </span><span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> OptimizeCssAssetsWebpackPlugin()
      ]
    }
}</span></pre>
</div>
<p>&nbsp;</p>
</div>
</div>
</div>
<p>&nbsp;</p>
<h3 id="yNjmE">支持react和mobx</h3>
<p>&nbsp;</p>
<p>安装react依赖</p>
<p>&nbsp;</p>
<div id="DPJcK" class="lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22shell%22%2C%22code%22%3A%22yarn%20add%20react%20react-dom%20%22%2C%22id%22%3A%22DPJcK%22%7D">
<div class="lake-codeblock-content">
<div class="CodeMirror">
<div class="cnblogs_code">
<pre>yarn add react react-dom </pre>
</div>
<p>&nbsp;</p>
</div>
</div>
</div>
<p>&nbsp;</p>
<p>安装mobx依赖</p>
<p>&nbsp;</p>
<div id="FwY9n" class="lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22shell%22%2C%22code%22%3A%22yarn%20add%20mobx%20mobx-react%22%2C%22id%22%3A%22FwY9n%22%7D">
<div class="lake-codeblock-content">
<div class="CodeMirror">
<div class="cnblogs_code">
<pre>yarn add mobx mobx-react</pre>
</div>
<p>&nbsp;</p>
</div>
</div>
</div>
<p>&nbsp;</p>
<h3 id="t17wX">支持typescript</h3>
<p>&nbsp;</p>
<p>安装依赖</p>
<p>&nbsp;</p>
<div id="wqwDf" class="lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22shell%22%2C%22code%22%3A%22yarn%20add%20typescript%20awesome-typescript-loader%20-D%22%2C%22id%22%3A%22wqwDf%22%7D">
<div class="lake-codeblock-content">
<div class="CodeMirror">
<div class="cnblogs_code">
<pre>yarn add typescript awesome-typescript-loader -D</pre>
</div>
<p>&nbsp;</p>
</div>
</div>
</div>
<p>&nbsp;</p>
<p>安装react的类型依赖(否则会有命名空间和.d.ts相关报错)</p>
<p>&nbsp;</p>
<div id="pYVXy" class="lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22shell%22%2C%22code%22%3A%22yarn%20add%20%40types%2Freact%20%40types%2Freact-dom%22%2C%22id%22%3A%22pYVXy%22%7D">
<div class="lake-codeblock-content">
<div class="CodeMirror">
<div class="cnblogs_code">
<pre>yarn add @types/react @types/react-dom</pre>
</div>
<p>&nbsp;</p>
</div>
</div>
</div>
<p>&nbsp;</p>
<p>在 webpack.config.js 中增加 loader 的配置(module.rules 数组中)。</p>
<p>&nbsp;</p>
<div id="HBmSz" class="lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22javascript%22%2C%22code%22%3A%22module.exports%20%3D%20%7B%5Cn%20%20%20%20%2F%2Fother%20code%5Cn%20%20%20%20module%3A%20%7B%5Cn%20%20%20%20%20%20%20%20rules%3A%20%5B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20test%3A%20%2F%5C%5C.(tsx%7Cts)%3F%24%2F%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20loader%3A%20%5C%22awesome-typescript-loader%5C%22%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20exclude%3A%20%2Fnode_modules%2F%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20include%3A%20path.resolve(__dirname%2C%20'src')%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%5D%5Cn%20%20%20%20%7D%5Cn%7D%22%2C%22id%22%3A%22HBmSz%22%7D">
<div class="lake-codeblock-content">
<div class="CodeMirror">
<div class="cnblogs_code">
<pre>module.exports =<span style="color: rgba(0, 0, 0, 1)"> {
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">other code</span>
<span style="color: rgba(0, 0, 0, 1)">    module: {
      rules: [
             {
                test: </span>/\.(tsx|ts)?$/<span style="color: rgba(0, 0, 0, 1)">,
                loader: </span>"awesome-typescript-loader"<span style="color: rgba(0, 0, 0, 1)">,
                exclude: </span>/node_modules/<span style="color: rgba(0, 0, 0, 1)">,
                include: path.resolve(__dirname, </span>'src'<span style="color: rgba(0, 0, 0, 1)">)
            }
      ]
    }
}</span></pre>
</div>
<p>&nbsp;</p>
</div>
</div>
</div>
<p>&nbsp;</p>
<p>在根目录下添加tsconfig.json</p>
<p>&nbsp;</p>
<div id="UVq1J" class="lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22json%22%2C%22code%22%3A%22%7B%5Cn%20%20%5C%22compilerOptions%5C%22%3A%20%7B%5Cn%20%20%20%20%5C%22baseUrl%5C%22%3A%20%5C%22.%5C%22%2C%5Cn%20%20%20%20%5C%22outDir%5C%22%3A%20%5C%22build%2Fdist%5C%22%2C%5Cn%20%20%20%20%5C%22module%5C%22%3A%20%5C%22esnext%5C%22%2C%5Cn%20%20%20%20%5C%22target%5C%22%3A%20%5C%22es5%5C%22%2C%5Cn%20%20%20%20%5C%22lib%5C%22%3A%20%5B%5C%22es6%5C%22%2C%20%5C%22dom%5C%22%5D%2C%5Cn%20%20%20%20%5C%22sourceMap%5C%22%3A%20true%2C%5Cn%20%20%20%20%5C%22allowJs%5C%22%3A%20true%2C%5Cn%20%20%20%20%5C%22jsx%5C%22%3A%20%5C%22react%5C%22%2C%5Cn%20%20%20%20%5C%22moduleResolution%5C%22%3A%20%5C%22node%5C%22%2C%5Cn%20%20%20%20%5C%22experimentalDecorators%5C%22%3A%20true%2C%5Cn%20%20%20%20%5C%22rootDir%5C%22%3A%20%5C%22.%2F%5C%22%2C%5Cn%20%20%20%20%5C%22forceConsistentCasingInFileNames%5C%22%3A%20true%2C%5Cn%20%20%20%20%5C%22noImplicitReturns%5C%22%3A%20true%2C%5Cn%20%20%20%20%5C%22noImplicitThis%5C%22%3A%20true%2C%5Cn%20%20%20%20%5C%22noImplicitAny%5C%22%3A%20false%2C%5Cn%20%20%20%20%5C%22importHelpers%5C%22%3A%20true%2C%5Cn%20%20%20%20%5C%22strictNullChecks%5C%22%3A%20true%2C%5Cn%20%20%20%20%5C%22suppressImplicitAnyIndexErrors%5C%22%3A%20true%2C%5Cn%20%20%20%20%5C%22noUnusedLocals%5C%22%3A%20false%2C%5Cn%20%20%20%20%5C%22allowSyntheticDefaultImports%5C%22%3A%20true%5Cn%20%20%7D%2C%5Cn%20%20%5C%22exclude%5C%22%3A%20%5B%5Cn%20%20%20%20%5C%22node_modules%5C%22%2C%5Cn%20%20%20%20%5C%22build%5C%22%2C%5Cn%20%20%20%20%5C%22scripts%5C%22%2C%5Cn%20%20%20%20%5C%22acceptance-tests%5C%22%2C%5Cn%20%20%20%20%5C%22webpack%5C%22%2C%5Cn%20%20%20%20%5C%22jest%5C%22%2C%5Cn%20%20%20%20%5C%22src%2FsetupTests.ts%5C%22%5Cn%20%20%5D%5Cn%7D%22%2C%22id%22%3A%22UVq1J%22%7D">
<div class="lake-codeblock-content">
<div class="CodeMirror">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">{
</span>"compilerOptions"<span style="color: rgba(0, 0, 0, 1)">: {
    </span>"baseUrl": "."<span style="color: rgba(0, 0, 0, 1)">,
    </span>"outDir": "build/dist"<span style="color: rgba(0, 0, 0, 1)">,
    </span>"module": "esnext"<span style="color: rgba(0, 0, 0, 1)">,
    </span>"target": "es5"<span style="color: rgba(0, 0, 0, 1)">,
    </span>"lib": ["es6", "dom"<span style="color: rgba(0, 0, 0, 1)">],
    </span>"sourceMap": <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
    </span>"allowJs": <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
    </span>"jsx": "react"<span style="color: rgba(0, 0, 0, 1)">,
    </span>"moduleResolution": "node"<span style="color: rgba(0, 0, 0, 1)">,
    </span>"experimentalDecorators": <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
    </span>"rootDir": "./"<span style="color: rgba(0, 0, 0, 1)">,
    </span>"forceConsistentCasingInFileNames": <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
    </span>"noImplicitReturns": <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
    </span>"noImplicitThis": <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
    </span>"noImplicitAny": <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">,
    </span>"importHelpers": <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
    </span>"strictNullChecks": <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
    </span>"suppressImplicitAnyIndexErrors": <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
    </span>"noUnusedLocals": <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">,
    </span>"allowSyntheticDefaultImports": <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">
},
</span>"exclude"<span style="color: rgba(0, 0, 0, 1)">: [
    </span>"node_modules"<span style="color: rgba(0, 0, 0, 1)">,
    </span>"build"<span style="color: rgba(0, 0, 0, 1)">,
    </span>"scripts"<span style="color: rgba(0, 0, 0, 1)">,
    </span>"acceptance-tests"<span style="color: rgba(0, 0, 0, 1)">,
    </span>"webpack"<span style="color: rgba(0, 0, 0, 1)">,
    </span>"jest"<span style="color: rgba(0, 0, 0, 1)">,
    </span>"src/setupTests.ts"<span style="color: rgba(0, 0, 0, 1)">
]
}</span></pre>
</div>
<p>&nbsp;</p>
</div>
</div>
</div>
<p>&nbsp;</p>
<p>在根目录下添加tslint.json</p>
<p>&nbsp;</p>
<div id="S4mas" class="lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22json%22%2C%22code%22%3A%22%7B%5Cn%20%20%5C%22extends%5C%22%3A%20%5B%5C%22tslint%3Arecommended%5C%22%2C%20%5C%22tslint-react%5C%22%2C%20%5C%22tslint-config-prettier%5C%22%5D%2C%5Cn%20%20%5C%22rules%5C%22%3A%20%7B%5Cn%20%20%20%20%5C%22no-empty-interface%5C%22%3Afalse%2C%5Cn%20%20%20%20%5C%22no-empty-block%5C%22%3Afalse%2C%5Cn%20%20%20%20%5C%22no-unused-expression%5C%22%3Afalse%2C%5Cn%20%20%20%20%5C%22object-literal-sort-keys%5C%22%3Afalse%2C%5Cn%20%20%20%20%5C%22no-empty%5C%22%3Afalse%2C%5Cn%20%20%20%20%5C%22semicolon%5C%22%3A%20%5Bfalse%2C%20%5C%22always%5C%22%5D%2C%5Cn%20%20%20%20%5C%22no-default-export%5C%22%3A%20false%2C%5Cn%20%20%20%20%5C%22member-access%5C%22%3A%20true%2C%5Cn%20%20%20%20%5C%22ordered-imports%5C%22%3A%20false%2C%5Cn%20%20%20%20%5C%22import-sources-order%5C%22%3A%20%5C%22any%5C%22%2C%5Cn%20%20%20%20%5C%22named-imports-order%5C%22%3A%20%5C%22any%5C%22%2C%5Cn%20%20%20%20%5C%22interface-over-type-literal%5C%22%3Afalse%2C%5Cn%20%20%20%20%5C%22jsx-no-lambda%5C%22%3Afalse%2C%5Cn%20%20%20%20%5C%22variable-name%5C%22%3A%20%5B%5Cn%20%20%20%20%20%20true%2C%5Cn%20%20%20%20%20%20%5C%22ban-keywords%5C%22%2C%5Cn%20%20%20%20%20%20%5C%22check-format%5C%22%2C%5Cn%20%20%20%20%20%20%5C%22allow-leading-underscore%5C%22%2C%5Cn%20%20%20%20%20%20%5C%22allow-trailing-underscore%5C%22%2C%5Cn%20%20%20%20%20%20%5C%22allow-pascal-case%5C%22%2C%5Cn%20%20%20%20%20%20%5C%22allow-snake-case%5C%22%5Cn%20%20%20%20%5D%2C%5Cn%20%20%20%20%5C%22no-console%5C%22%3A%20false%2C%5Cn%20%20%20%20%5C%22no-angle-bracket-type-assertion%5C%22%3A%20false%2C%5Cn%20%20%20%20%5C%22jsx-no-string-ref%5C%22%3Afalse%2C%5Cn%20%20%20%20%5C%22prefer-for-of%5C%22%3Afalse%2C%5Cn%20%20%20%20%5C%22member-ordering%5C%22%3Afalse%2C%5Cn%20%20%20%20%5C%22only-arrow-functions%5C%22%3Afalse%2C%5Cn%20%20%20%20%5C%22object-literal-shorthand%5C%22%3Afalse%5Cn%20%20%7D%2C%5Cn%20%20%5C%22linterOptions%5C%22%3A%20%7B%5Cn%20%20%20%20%5C%22exclude%5C%22%3A%20%5B%5Cn%20%20%20%20%20%20%5C%22config%2F**%2F*.js%5C%22%2C%5Cn%20%20%20%20%20%20%5C%22node_modules%2F**%2F*.ts%5C%22%2C%5Cn%20%20%20%20%20%20%5C%22coverage%2Flcov-report%2F*.js%5C%22%5Cn%20%20%20%20%5D%5Cn%20%20%7D%2C%5Cn%20%20%5C%22strict%5C%22%3A%20false%5Cn%7D%5Cn%22%2C%22id%22%3A%22S4mas%22%7D">
<div class="lake-codeblock-content">
<div class="CodeMirror">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">{
</span>"extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"<span style="color: rgba(0, 0, 0, 1)">],
</span>"rules"<span style="color: rgba(0, 0, 0, 1)">: {
    </span>"no-empty-interface":<span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">,
    </span>"no-empty-block":<span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">,
    </span>"no-unused-expression":<span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">,
    </span>"object-literal-sort-keys":<span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">,
    </span>"no-empty":<span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">,
    </span>"semicolon": [<span style="color: rgba(0, 0, 255, 1)">false</span>, "always"<span style="color: rgba(0, 0, 0, 1)">],
    </span>"no-default-export": <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">,
    </span>"member-access": <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
    </span>"ordered-imports": <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">,
    </span>"import-sources-order": "any"<span style="color: rgba(0, 0, 0, 1)">,
    </span>"named-imports-order": "any"<span style="color: rgba(0, 0, 0, 1)">,
    </span>"interface-over-type-literal":<span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">,
    </span>"jsx-no-lambda":<span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">,
    </span>"variable-name"<span style="color: rgba(0, 0, 0, 1)">: [
      </span><span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
      </span>"ban-keywords"<span style="color: rgba(0, 0, 0, 1)">,
      </span>"check-format"<span style="color: rgba(0, 0, 0, 1)">,
      </span>"allow-leading-underscore"<span style="color: rgba(0, 0, 0, 1)">,
      </span>"allow-trailing-underscore"<span style="color: rgba(0, 0, 0, 1)">,
      </span>"allow-pascal-case"<span style="color: rgba(0, 0, 0, 1)">,
      </span>"allow-snake-case"<span style="color: rgba(0, 0, 0, 1)">
    ],
    </span>"no-console": <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">,
    </span>"no-angle-bracket-type-assertion": <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">,
    </span>"jsx-no-string-ref":<span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">,
    </span>"prefer-for-of":<span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">,
    </span>"member-ordering":<span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">,
    </span>"only-arrow-functions":<span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">,
    </span>"object-literal-shorthand":<span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">
},
</span>"linterOptions"<span style="color: rgba(0, 0, 0, 1)">: {
    </span>"exclude"<span style="color: rgba(0, 0, 0, 1)">: [
      </span>"config/**/*.js"<span style="color: rgba(0, 0, 0, 1)">,
      </span>"node_modules/**/*.ts"<span style="color: rgba(0, 0, 0, 1)">,
      </span>"coverage/lcov-report/*.js"<span style="color: rgba(0, 0, 0, 1)">
    ]
},
</span>"strict": <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">
}</span></pre>
</div>
<p>&nbsp;</p>
</div>
</div>
</div>
<p>&nbsp;</p>
<h3 id="wyRpP">打包前先清空输出目录</h3>
<p>&nbsp;</p>
<p>安装依赖</p>
<p>&nbsp;</p>
<div id="8qRlU" class="lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22shell%22%2C%22code%22%3A%22yarn%20add%20clean-webpack-plugin%20-D%22%2C%22id%22%3A%228qRlU%22%7D">
<div class="lake-codeblock-content">
<div class="CodeMirror">
<div class="cnblogs_code">
<pre>yarn add clean-webpack-plugin -D</pre>
</div>
<p>&nbsp;</p>
</div>
</div>
</div>
<p>&nbsp;</p>
<p><span class="lake-fontsize-11">在 webpack.config.js 中增加 plugins 的配置</span></p>
<p>&nbsp;</p>
<div id="NQ2Af" class="lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22javascript%22%2C%22code%22%3A%22const%20%7BCleanWebpackPlugin%7D%20%3D%20require('clean-webpack-plugin')%3B%5Cn%5Cnmodule.exports%20%3D%20%7B%5Cn%20%20%20%20%2F%2Fother%20code%5Cn%20%20%20%20plugins%3A%20%5B%5Cn%20%20%20%20%20%20%20%20new%20CleanWebpackPlugin()%5Cn%20%20%20%20%5D%5Cn%7D%22%2C%22id%22%3A%22NQ2Af%22%7D">
<div class="lake-codeblock-content">
<div class="CodeMirror">
<div class="cnblogs_code">
<pre>const {CleanWebpackPlugin} = require('clean-webpack-plugin'<span style="color: rgba(0, 0, 0, 1)">);

module.exports </span>=<span style="color: rgba(0, 0, 0, 1)"> {
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">other code</span>
<span style="color: rgba(0, 0, 0, 1)">    plugins: [
      </span><span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> CleanWebpackPlugin()
    ]
}</span></pre>
</div>
<p>&nbsp;</p>
</div>
</div>
</div>
<p>&nbsp;</p>
<p>( 注意3.0版本的clean-webpack-plugin有大改动，需要通过构造函数取出CleanWebpackPlugin再用 )</p>
<p>&nbsp;</p>
<p><span class="lake-fontsize-11">至此，webpack配置已经基本能满足react+less+typescript+mobx开发<span class="lake-fontsize-11">需求。</span></span></p>
<p><span class="lake-fontsize-11">&nbsp;</span></p>
<h3 id="BESRB">完整webpack.config.js和package.json文件</h3>
<p>&nbsp;</p>
<p><span class="lake-fontsize-11">webpack.config.js文件</span></p>
<p>&nbsp;</p>
<div id="GAu47" class="lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22javascript%22%2C%22code%22%3A%22const%20path%20%3D%20require('path')%3B%5Cn%2F%2F%20%E6%89%93%E5%8C%85html%E7%9A%84%E6%8F%92%E4%BB%B6%5Cnconst%20HtmlWebpackPlugin%20%3D%20require('html-webpack-plugin')%3B%5Cn%2F%2F%20%E5%8E%8B%E7%BC%A9JS%E7%9A%84%E6%8F%92%E4%BB%B6%5Cnconst%20UglifyWebpackPlugin%20%3D%20require('uglifyjs-webpack-plugin')%3B%5Cn%2F%2F%20%E5%88%86%E7%A6%BBcss%E6%96%87%E4%BB%B6%5Cnconst%20MiniCssExtractPlugin%20%3D%20require('mini-css-extract-plugin')%3B%5Cn%2F%2F%20%E6%89%93%E5%8C%85%E5%89%8D%E5%85%88%E6%B8%85%E7%A9%BA%E8%BE%93%E5%87%BA%E7%9B%AE%E5%BD%95%5Cnconst%20%7BCleanWebpackPlugin%7D%20%3D%20require('clean-webpack-plugin')%3B%5Cn%5Cnmodule.exports%20%3D%20%7B%5Cn%20%20%20%20mode%3A%20'development'%2C%5Cn%20%20%20%20%2F%2F%20%E5%85%A5%E5%8F%A3%20%E8%BF%99%E9%87%8C%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F%E5%BC%80%E5%A7%8B%E6%89%A7%E8%A1%8C%5Cn%20%20%20%20entry%3A%20path.resolve(__dirname%2C%20'src%2Findex.tsx')%2C%5Cn%20%20%20%20%2F%2F%20%E5%87%BA%E5%8F%A3%5Cn%20%20%20%20output%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%2F%2F%20%E6%89%80%E6%9C%89%E8%BE%93%E5%87%BA%E6%96%87%E4%BB%B6%E7%9A%84%E7%9B%AE%E6%A0%87%E8%B7%AF%E5%BE%84%5Cn%20%20%20%20%20%20%20%20path%3A%20path.resolve(__dirname%2C%20'dist')%2C%5Cn%20%20%20%20%20%20%20%20%2F%2F%20%E8%BE%93%E5%87%BA%E7%9A%84%E6%96%87%E4%BB%B6%E5%90%8D%5Cn%20%20%20%20%20%20%20%20filename%3A%20'bundle.js'%2C%5Cn%20%20%20%20%20%20%20%20%2F%2F%20%E8%BE%93%E5%87%BA%E8%A7%A3%E6%9E%90%E6%96%87%E4%BB%B6%E7%9A%84%E7%9B%AE%E5%BD%95%EF%BC%8Curl%20%E7%9B%B8%E5%AF%B9%E4%BA%8E%20HTML%20%E9%A1%B5%E9%9D%A2%EF%BC%8C%20publicPath%20%E4%B8%8A%E7%BA%BF%E6%97%B6%E9%85%8D%E7%BD%AE%E7%9A%84%E6%98%AFcdn%E7%9A%84%E5%9C%B0%E5%9D%80%E3%80%82%5Cn%20%20%20%20%20%20%20%20%2F%2F%20%E9%9D%99%E6%80%81%E8%B5%84%E6%BA%90%E6%9C%80%E7%BB%88%E8%AE%BF%E9%97%AE%E8%B7%AF%E5%BE%84%20%3D%20output.publicPath%20%2B%20%E8%B5%84%E6%BA%90loader%E6%88%96%E6%8F%92%E4%BB%B6%E7%AD%89%E9%85%8D%E7%BD%AE%E8%B7%AF%E5%BE%84%5Cn%20%20%20%20%20%20%20%20publicPath%3A%20'.%2F'%5Cn%20%20%20%20%7D%2C%5Cn%20%20%20%20devServer%3A%20%7B%5Cn%20%20%20%20%20%20%20%20hot%3A%20true%2C%5Cn%20%20%20%20%20%20%20%20port%3A%203000%2C%5Cn%20%20%20%20%20%20%20%20open%3A%20true%2C%5Cn%20%20%20%20%20%20%20%20contentBase%3A%20path.resolve(__dirname%2C%20'dist')%2C%5Cn%20%20%20%20%20%20%20%20publicPath%3A%20'%2F'%2C%5Cn%20%20%20%20%20%20%20%20%2F%2F%20stats%3A%20'none'%5Cn%20%20%20%20%7D%2C%5Cn%20%20%20%20module%3A%20%7B%5Cn%20%20%20%20%20%20%20%20rules%3A%20%5B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%2F*%5Cn%20%20%20%20%20%20%20%20%20%20%20%20*%20%E6%94%AF%E6%8C%81css%5Cn%20%20%20%20%20%20%20%20%20%20%20%20*%20%E9%80%9A%E8%BF%87%E4%BD%BF%E7%94%A8%E4%B8%8D%E5%90%8C%E7%9A%84%20style-loader%20%E5%92%8C%20css-loader%2C%20%E5%8F%AF%E4%BB%A5%E5%B0%86%20css%20%E6%96%87%E4%BB%B6%E8%BD%AC%E6%8D%A2%E6%88%90JS%E6%96%87%E4%BB%B6%E7%B1%BB%E5%9E%8B%E3%80%82%5Cn%20%20%20%20%20%20%20%20%20%20%20%20*%20*%2F%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20test%3A%20%2F%5C%5C.css%2F%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20use%3A%20%5B'style-loader'%2C%20'css-loader'%5D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20use%3A%20%5B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20loader%3A%20MiniCssExtractPlugin.loader%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20'css-loader'%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20exclude%3A%20%2Fnode_modules%2F%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20include%3A%20path.resolve(__dirname%2C%20'src')%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%2F*%5Cn%20%20%20%20%20%20%20%20%20%20%20%20*%20%E6%94%AF%E6%8C%81%E7%BC%96%E8%AF%91less%E5%92%8Csass%5Cn%20%20%20%20%20%20%20%20%20%20%20%20*%20*%2F%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20test%3A%20%2F.less%2F%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20use%3A%20%5B'style-loader'%2C%20'css-loader'%2C%20'less-loader'%5D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20use%3A%20%5B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20loader%3A%20MiniCssExtractPlugin.loader%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20'css-loader'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20'less-loader'%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20exclude%3A%20%2Fnode_modules%2F%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20include%3A%20path.resolve(__dirname%2C%20'src')%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%2F*%5Cn%20%20%20%20%20%20%20%20%20%20%20%20*%20%E6%94%AF%E6%8C%81%E5%8A%A0%E8%BD%BD%E5%9B%BE%E7%89%87%5Cn%20%20%20%20%20%20%20%20%20%20%20%20*%20file-loader%3A%20%E8%A7%A3%E5%86%B3CSS%E7%AD%89%E6%96%87%E4%BB%B6%E4%B8%AD%E7%9A%84%E5%BC%95%E5%85%A5%E5%9B%BE%E7%89%87%E8%B7%AF%E5%BE%84%E9%97%AE%E9%A2%98%5Cn%20%20%20%20%20%20%20%20%20%20%20%20*%20url-loader%3A%20%E5%BD%93%E5%9B%BE%E7%89%87%E5%B0%8F%E4%BA%8Elimit%E7%9A%84%E6%97%B6%E5%80%99%E4%BC%9A%E6%8A%8A%E5%9B%BE%E7%89%87Base64%E7%BC%96%E7%A0%81%EF%BC%8C%E5%A4%A7%E4%BA%8Elimit%E5%8F%82%E6%95%B0%E7%9A%84%E6%97%B6%E5%80%99%E8%BF%98%E6%98%AF%E4%BD%BF%E7%94%A8file-loader%E8%BF%9B%E8%A1%8C%E6%8B%B7%E8%B4%9D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20*%20*%2F%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20test%3A%20%2F%5C%5C.(gif%7Cjpg%7Cpng%7Cbmp%7Ceot%7Cwoff%7Cwoff2%7Cttf%7Csvg)%2F%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20use%3A%20%5B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20loader%3A%20'url-loader'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20options%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20limit%3A%201%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20outputPath%3A%20'images'%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%2F*%5Cn%20%20%20%20%20%20%20%20%20%20%20%20*%20%E6%94%AF%E6%8C%81%E8%BD%AC%E4%B9%89%20ES6%2FES7%2FJSX%20%20%2C%E6%94%AF%E6%8C%81react%5Cn%20%20%20%20%20%20%20%20%20%20%20%20*%20ES6%2FES7%2FJSX%20%E8%BD%AC%E4%B9%89%E9%9C%80%E8%A6%81%20Babel%20%E7%9A%84%E4%BE%9D%E8%B5%96%EF%BC%8C%E6%94%AF%E6%8C%81%E8%A3%85%E9%A5%B0%E5%99%A8%E3%80%82%5Cn%20%20%20%20%20%20%20%20%20%20%20%20*%20*%2F%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20test%3A%20%2F%5C%5C.jsx%3F%24%2F%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20use%3A%20%5B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20loader%3A%20%5C%22babel-loader%5C%22%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20options%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20presets%3A%20%5B'%40babel%2Fpreset-env'%2C%20'%40babel%2Freact'%5D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20plugins%3A%20%5B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5C%22%40babel%2Fplugin-proposal-decorators%5C%22%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%5C%22%40babel%2Fplugin-proposal-class-properties%5C%22%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5C%22legacy%5C%22%3A%20true%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20exclude%3A%20%2Fnode_modules%2F%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20include%3A%20path.resolve(__dirname%2C%20'src')%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%2F*%5Cn%20%20%20%20%20%20%20%20%20%20%20*%20%E6%94%AF%E6%8C%81%E8%BD%AC%E4%B9%89%20%E6%94%AF%E6%8C%81typescript%5Cn%20%20%20%20%20%20%20%20%20%20%20*%20ES6%2FES7%2FJSX%20%E8%BD%AC%E4%B9%89%E9%9C%80%E8%A6%81%20Babel%20%E7%9A%84%E4%BE%9D%E8%B5%96%EF%BC%8C%E6%94%AF%E6%8C%81%E8%A3%85%E9%A5%B0%E5%99%A8%E3%80%82%5Cn%20%20%20%20%20%20%20%20%20%20%20*%20*%2F%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20test%3A%20%2F%5C%5C.(tsx%7Cts)%3F%24%2F%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20loader%3A%20%5C%22awesome-typescript-loader%5C%22%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20exclude%3A%20%2Fnode_modules%2F%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20include%3A%20path.resolve(__dirname%2C%20'src')%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%5D%5Cn%20%20%20%20%7D%2C%5Cn%20%20%20%20optimization%3A%20%7B%5Cn%20%20%20%20%20%20%20%20minimizer%3A%20%5B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20new%20UglifyWebpackPlugin(%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20parallel%3A%204%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7D)%5Cn%20%20%20%20%20%20%20%20%5D%5Cn%20%20%20%20%7D%2C%5Cn%20%20%20%20plugins%3A%20%5B%5Cn%20%20%20%20%20%20%20%20new%20HtmlWebpackPlugin(%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20template%3A%20path.resolve(__dirname%2C%20'public%2Findex.html')%5Cn%20%20%20%20%20%20%20%20%7D)%2C%5Cn%20%20%20%20%20%20%20%20new%20MiniCssExtractPlugin(%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20filename%3A'css%2F%5Bname%5D.css'%5Cn%20%20%20%20%20%20%20%20%7D)%2C%5Cn%20%20%20%20%20%20%20%20new%20CleanWebpackPlugin()%5Cn%20%20%20%20%5D%5Cn%7D%3B%22%2C%22id%22%3A%22GAu47%22%7D">
<div class="lake-codeblock-content">
<div class="CodeMirror">
<div class="cnblogs_code">
<pre>const path = require('path'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 打包html的插件</span>
const HtmlWebpackPlugin = require('html-webpack-plugin'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 压缩JS的插件</span>
const UglifyWebpackPlugin = require('uglifyjs-webpack-plugin'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 分离css文件</span>
const MiniCssExtractPlugin = require('mini-css-extract-plugin'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 打包前先清空输出目录</span>
const {CleanWebpackPlugin} = require('clean-webpack-plugin'<span style="color: rgba(0, 0, 0, 1)">);

module.exports </span>=<span style="color: rgba(0, 0, 0, 1)"> {
    mode: </span>'development'<span style="color: rgba(0, 0, 0, 1)">,
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 入口 这里应用程序开始执行</span>
    entry: path.resolve(__dirname, 'src/index.tsx'<span style="color: rgba(0, 0, 0, 1)">),
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 出口</span>
<span style="color: rgba(0, 0, 0, 1)">    output: {
      </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 所有输出文件的目标路径</span>
      path: path.resolve(__dirname, 'dist'<span style="color: rgba(0, 0, 0, 1)">),
      </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 输出的文件名</span>
      filename: 'bundle.js'<span style="color: rgba(0, 0, 0, 1)">,
      </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 输出解析文件的目录，url 相对于 HTML 页面， publicPath 上线时配置的是cdn的地址。</span>
      <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 静态资源最终访问路径 = output.publicPath + 资源loader或插件等配置路径</span>
      publicPath: './'<span style="color: rgba(0, 0, 0, 1)">
    },
    devServer: {
      hot: </span><span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
      port: </span>3000<span style="color: rgba(0, 0, 0, 1)">,
      open: </span><span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
      contentBase: path.resolve(__dirname, </span>'dist'<span style="color: rgba(0, 0, 0, 1)">),
      publicPath: </span>'/'<span style="color: rgba(0, 0, 0, 1)">,
      </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> stats: 'none'</span>
<span style="color: rgba(0, 0, 0, 1)">    },
    module: {
      rules: [
            </span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">
            * 支持css
            * 通过使用不同的 style-loader 和 css-loader, 可以将 css 文件转换成JS文件类型。
            * </span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">
            {
                test: </span>/\.css/<span style="color: rgba(0, 0, 0, 1)">,
                </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> use: ['style-loader', 'css-loader'],</span>
<span style="color: rgba(0, 0, 0, 1)">                use: [
                  {
                        loader: MiniCssExtractPlugin.loader
                  },
                  </span>'css-loader'<span style="color: rgba(0, 0, 0, 1)">
                ],
                exclude: </span>/node_modules/<span style="color: rgba(0, 0, 0, 1)">,
                include: path.resolve(__dirname, </span>'src'<span style="color: rgba(0, 0, 0, 1)">)
            },
            </span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">
            * 支持编译less和sass
            * </span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">
            {
                test: </span>/.less/<span style="color: rgba(0, 0, 0, 1)">,
                </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> use: ['style-loader', 'css-loader', 'less-loader'],</span>
<span style="color: rgba(0, 0, 0, 1)">                use: [
                  {
                        loader: MiniCssExtractPlugin.loader
                  },
                  </span>'css-loader'<span style="color: rgba(0, 0, 0, 1)">,
                  </span>'less-loader'<span style="color: rgba(0, 0, 0, 1)">
                ],
                exclude: </span>/node_modules/<span style="color: rgba(0, 0, 0, 1)">,
                include: path.resolve(__dirname, </span>'src'<span style="color: rgba(0, 0, 0, 1)">)
            },
            </span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">
            * 支持加载图片
            * file-loader: 解决CSS等文件中的引入图片路径问题
            * url-loader: 当图片小于limit的时候会把图片Base64编码，大于limit参数的时候还是使用file-loader进行拷贝
            * </span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">
            {
                test: </span>/\.(gif|jpg|png|bmp|eot|woff|woff2|ttf|svg)/<span style="color: rgba(0, 0, 0, 1)">,
                use: [
                  {
                        loader: </span>'url-loader'<span style="color: rgba(0, 0, 0, 1)">,
                        options: {
                            limit: </span>1<span style="color: rgba(0, 0, 0, 1)">,
                            outputPath: </span>'images'<span style="color: rgba(0, 0, 0, 1)">
                        }
                  }
                ]
            },
            </span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">
            * 支持转义 ES6/ES7/JSX,支持react
            * ES6/ES7/JSX 转义需要 Babel 的依赖，支持装饰器。
            * </span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">
            {
                test: </span>/\.jsx?$/<span style="color: rgba(0, 0, 0, 1)">,
                use: [
                  {
                        loader: </span>"babel-loader"<span style="color: rgba(0, 0, 0, 1)">,
                        options: {
                            presets: [</span>'@babel/preset-env', '@babel/react'<span style="color: rgba(0, 0, 0, 1)">],
                            plugins: [
                              [
                                    </span>"@babel/plugin-proposal-decorators"<span style="color: rgba(0, 0, 0, 1)">,
                                    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "@babel/plugin-proposal-class-properties",</span>
<span style="color: rgba(0, 0, 0, 1)">                                    {
                                        </span>"legacy": <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">
                                    }
                              ]
                            ]
                        }
                  }
                ],
                exclude: </span>/node_modules/<span style="color: rgba(0, 0, 0, 1)">,
                include: path.resolve(__dirname, </span>'src'<span style="color: rgba(0, 0, 0, 1)">)
            },
            </span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">
         * 支持转义 支持typescript
         * ES6/ES7/JSX 转义需要 Babel 的依赖，支持装饰器。
         * </span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">
            {
                test: </span>/\.(tsx|ts)?$/<span style="color: rgba(0, 0, 0, 1)">,
                loader: </span>"awesome-typescript-loader"<span style="color: rgba(0, 0, 0, 1)">,
                exclude: </span>/node_modules/<span style="color: rgba(0, 0, 0, 1)">,
                include: path.resolve(__dirname, </span>'src'<span style="color: rgba(0, 0, 0, 1)">)
            }
      ]
    },
    optimization: {
      minimizer: [
            </span><span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> UglifyWebpackPlugin({
                parallel: </span>4<span style="color: rgba(0, 0, 0, 1)">
            })
      ]
    },
    plugins: [
      </span><span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> HtmlWebpackPlugin({
            template: path.resolve(__dirname, </span>'public/index.html'<span style="color: rgba(0, 0, 0, 1)">)
      }),
      </span><span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> MiniCssExtractPlugin({
            filename:</span>'css/.css'<span style="color: rgba(0, 0, 0, 1)">
      }),
      </span><span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> CleanWebpackPlugin()
    ]
};</span></pre>
</div>
<p>&nbsp;</p>
</div>
</div>
</div>
<p>&nbsp;</p>
<p><span class="lake-fontsize-11">package.json文件</span></p>
<p><span class="lake-fontsize-11">&nbsp;</span></p>
<div id="WASyd" class="lake-selected" data-card-type="block" data-lake-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22json%22%2C%22code%22%3A%22%7B%5Cn%20%20%5C%22name%5C%22%3A%20%5C%22webpack_cli%5C%22%2C%5Cn%20%20%5C%22version%5C%22%3A%20%5C%221.0.0%5C%22%2C%5Cn%20%20%5C%22main%5C%22%3A%20%5C%22index.js%5C%22%2C%5Cn%20%20%5C%22license%5C%22%3A%20%5C%22MIT%5C%22%2C%5Cn%20%20%5C%22scripts%5C%22%3A%20%7B%5Cn%20%20%20%20%5C%22start%5C%22%3A%20%5C%22webpack-dev-server%20--mode%20development%5C%22%2C%5Cn%20%20%20%20%5C%22build%5C%22%3A%20%5C%22webpack%20--mode%20production%5C%22%5Cn%20%20%7D%2C%5Cn%20%20%5C%22devDependencies%5C%22%3A%20%7B%5Cn%20%20%20%20%5C%22%40babel%2Fcore%5C%22%3A%20%5C%22%5E7.5.5%5C%22%2C%5Cn%20%20%20%20%5C%22%40babel%2Fplugin-proposal-decorators%5C%22%3A%20%5C%22%5E7.4.4%5C%22%2C%5Cn%20%20%20%20%5C%22%40babel%2Fplugin-proposal-object-rest-spread%5C%22%3A%20%5C%22%5E7.5.5%5C%22%2C%5Cn%20%20%20%20%5C%22%40babel%2Fpreset-env%5C%22%3A%20%5C%22%5E7.5.5%5C%22%2C%5Cn%20%20%20%20%5C%22%40babel%2Fpreset-react%5C%22%3A%20%5C%22%5E7.0.0%5C%22%2C%5Cn%20%20%20%20%5C%22%40types%2Freact%5C%22%3A%20%5C%22%5E16.9.2%5C%22%2C%5Cn%20%20%20%20%5C%22%40types%2Freact-dom%5C%22%3A%20%5C%22%5E16.8.5%5C%22%2C%5Cn%20%20%20%20%5C%22awesome-typescript-loader%5C%22%3A%20%5C%22%5E5.2.1%5C%22%2C%5Cn%20%20%20%20%5C%22babel-loader%5C%22%3A%20%5C%22%5E8.0.6%5C%22%2C%5Cn%20%20%20%20%5C%22clean-webpack-plugin%5C%22%3A%20%5C%22%5E3.0.0%5C%22%2C%5Cn%20%20%20%20%5C%22css-loader%5C%22%3A%20%5C%22%5E3.2.0%5C%22%2C%5Cn%20%20%20%20%5C%22file-loader%5C%22%3A%20%5C%22%5E4.2.0%5C%22%2C%5Cn%20%20%20%20%5C%22html-webpack-plugin%5C%22%3A%20%5C%22%5E3.2.0%5C%22%2C%5Cn%20%20%20%20%5C%22less%5C%22%3A%20%5C%22%5E3.10.1%5C%22%2C%5Cn%20%20%20%20%5C%22less-loader%5C%22%3A%20%5C%22%5E5.0.0%5C%22%2C%5Cn%20%20%20%20%5C%22mini-css-extract-plugin%5C%22%3A%20%5C%22%5E0.8.0%5C%22%2C%5Cn%20%20%20%20%5C%22optimize-css-assets-webpack-plugin%5C%22%3A%20%5C%22%5E5.0.3%5C%22%2C%5Cn%20%20%20%20%5C%22style-loader%5C%22%3A%20%5C%22%5E1.0.0%5C%22%2C%5Cn%20%20%20%20%5C%22typescript%5C%22%3A%20%5C%22%5E3.5.3%5C%22%2C%5Cn%20%20%20%20%5C%22uglifyjs-webpack-plugin%5C%22%3A%20%5C%22%5E2.2.0%5C%22%2C%5Cn%20%20%20%20%5C%22url-loader%5C%22%3A%20%5C%22%5E2.1.0%5C%22%2C%5Cn%20%20%20%20%5C%22webpack%5C%22%3A%20%5C%22%5E4.39.2%5C%22%2C%5Cn%20%20%20%20%5C%22webpack-cli%5C%22%3A%20%5C%22%5E3.3.7%5C%22%2C%5Cn%20%20%20%20%5C%22webpack-dev-server%5C%22%3A%20%5C%22%5E3.8.0%5C%22%5Cn%20%20%7D%2C%5Cn%20%20%5C%22dependencies%5C%22%3A%20%7B%5Cn%20%20%20%20%5C%22mobx%5C%22%3A%20%5C%22%5E5.13.0%5C%22%2C%5Cn%20%20%20%20%5C%22mobx-react%5C%22%3A%20%5C%22%5E6.1.3%5C%22%2C%5Cn%20%20%20%20%5C%22react%5C%22%3A%20%5C%22%5E16.9.0%5C%22%2C%5Cn%20%20%20%20%5C%22react-dom%5C%22%3A%20%5C%22%5E16.9.0%5C%22%5Cn%20%20%7D%5Cn%7D%22%2C%22id%22%3A%22WASyd%22%7D">
<div class="lake-codeblock-content">
<div class="CodeMirror">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">{
</span>"name": "webpack_cli"<span style="color: rgba(0, 0, 0, 1)">,
</span>"version": "1.0.0"<span style="color: rgba(0, 0, 0, 1)">,
</span>"main": "index.js"<span style="color: rgba(0, 0, 0, 1)">,
</span>"license": "MIT"<span style="color: rgba(0, 0, 0, 1)">,
</span>"scripts"<span style="color: rgba(0, 0, 0, 1)">: {
    </span>"start": "webpack-dev-server --mode development"<span style="color: rgba(0, 0, 0, 1)">,
    </span>"build": "webpack --mode production"<span style="color: rgba(0, 0, 0, 1)">
},
</span>"devDependencies"<span style="color: rgba(0, 0, 0, 1)">: {
    </span>"@babel/core": "^7.5.5"<span style="color: rgba(0, 0, 0, 1)">,
    </span>"@babel/plugin-proposal-decorators": "^7.4.4"<span style="color: rgba(0, 0, 0, 1)">,
    </span>"@babel/plugin-proposal-object-rest-spread": "^7.5.5"<span style="color: rgba(0, 0, 0, 1)">,
    </span>"@babel/preset-env": "^7.5.5"<span style="color: rgba(0, 0, 0, 1)">,
    </span>"@babel/preset-react": "^7.0.0"<span style="color: rgba(0, 0, 0, 1)">,
    </span>"@types/react": "^16.9.2"<span style="color: rgba(0, 0, 0, 1)">,
    </span>"@types/react-dom": "^16.8.5"<span style="color: rgba(0, 0, 0, 1)">,
    </span>"awesome-typescript-loader": "^5.2.1"<span style="color: rgba(0, 0, 0, 1)">,
    </span>"babel-loader": "^8.0.6"<span style="color: rgba(0, 0, 0, 1)">,
    </span>"clean-webpack-plugin": "^3.0.0"<span style="color: rgba(0, 0, 0, 1)">,
    </span>"css-loader": "^3.2.0"<span style="color: rgba(0, 0, 0, 1)">,
    </span>"file-loader": "^4.2.0"<span style="color: rgba(0, 0, 0, 1)">,
    </span>"html-webpack-plugin": "^3.2.0"<span style="color: rgba(0, 0, 0, 1)">,
    </span>"less": "^3.10.1"<span style="color: rgba(0, 0, 0, 1)">,
    </span>"less-loader": "^5.0.0"<span style="color: rgba(0, 0, 0, 1)">,
    </span>"mini-css-extract-plugin": "^0.8.0"<span style="color: rgba(0, 0, 0, 1)">,
    </span>"optimize-css-assets-webpack-plugin": "^5.0.3"<span style="color: rgba(0, 0, 0, 1)">,
    </span>"style-loader": "^1.0.0"<span style="color: rgba(0, 0, 0, 1)">,
    </span>"typescript": "^3.5.3"<span style="color: rgba(0, 0, 0, 1)">,
    </span>"uglifyjs-webpack-plugin": "^2.2.0"<span style="color: rgba(0, 0, 0, 1)">,
    </span>"url-loader": "^2.1.0"<span style="color: rgba(0, 0, 0, 1)">,
    </span>"webpack": "^4.39.2"<span style="color: rgba(0, 0, 0, 1)">,
    </span>"webpack-cli": "^3.3.7"<span style="color: rgba(0, 0, 0, 1)">,
    </span>"webpack-dev-server": "^3.8.0"<span style="color: rgba(0, 0, 0, 1)">
},
</span>"dependencies"<span style="color: rgba(0, 0, 0, 1)">: {
    </span>"mobx": "^5.13.0"<span style="color: rgba(0, 0, 0, 1)">,
    </span>"mobx-react": "^6.1.3"<span style="color: rgba(0, 0, 0, 1)">,
    </span>"react": "^16.9.0"<span style="color: rgba(0, 0, 0, 1)">,
    </span>"react-dom": "^16.9.0"<span style="color: rgba(0, 0, 0, 1)">
}
}</span></pre>
</div>
<p>&nbsp;</p>
</div>
</div>
</div>
<p>&nbsp;</p>
<p>学习更多webpack配置请进入webpack官网&nbsp;webpack官网链接</p>
<p>&nbsp;</p>
<p>本文配置将持续升级优化</p><br><br>
来源：https://www.cnblogs.com/piaobodewu/p/11374475.html
頁: [1]
查看完整版本: 从零配置webpack(react+less+typescript+mobx)