{"id":282,"date":"2021-08-12T20:41:54","date_gmt":"2021-08-12T12:41:54","guid":{"rendered":"http:\/\/gjweb.top\/?p=282"},"modified":"2021-08-23T21:16:39","modified_gmt":"2021-08-23T13:16:39","slug":"webpack-%e5%b8%b8%e7%94%a8%e7%9a%84%e8%a7%a3%e6%9e%90","status":"publish","type":"post","link":"https:\/\/gjweb.top\/?p=282","title":{"rendered":"webpack \u5e38\u7528\u89e3\u6790\u603b\u7ed3"},"content":{"rendered":"\n
  1. \u89e3\u6790ES6 \u548c React JSX<\/li>
  2. \u89e3\u6790 CSS\u3001Less \u548c Sass<\/li>
  3. \u89e3\u6790\u56fe\u7247\u548c\u5b57\u4f53<\/li>
  4. \u6587\u4ef6\u6307\u7eb9\u7b56\u7565<\/li>
  5. JS\u3001CSS\u3001HTML \u4ee3\u7801\u538b\u7f29<\/li><\/ol>\n\n\n\n
    \n\n\n\n

    \u89e3\u6790 ES6 \u548c React JSX<\/h2>\n\n\n\n

    \u5b89\u88c5<\/p>\n\n\n\n

    npm install @babel\/core @babel\/preset-env babel-loader --save-dev<\/code><\/pre>\n\n\n\n
    \u5728 webpack.config.js \u6587\u4ef6\u4e2d\u914d\u7f6e\u5982\u4e0b<\/p>\n\n\n\n
    mosule.export = {
        module:{
            rules:[
                {test:\/\\.js$\/,use:'babel-loader'}
            ]
        }
    }<\/code><\/pre>\n\n\n\n
    \u65b0\u5efa .babelrc \u6587\u4ef6 \u914d\u7f6e<\/p>\n\n\n\n
    {
        \"presets\":[
            \"@babel\/preset-env\",
            \"@babel\/preset-react\"
        ]
    }<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    webpack \u89e3\u6790 CSS \\ less \\ Sass<\/h2>\n\n\n\n
    \u5b89\u88c5\u4f9d\u8d56<\/p>\n\n\n\n
    npm install style-loader css-loader  less-loader  sass-loader --save-dev<\/code><\/pre>\n\n\n\n
    \u914d\u7f6e webpack.config.js \u6587\u4ef6\u4e2d<\/p>\n\n\n\n
    module.exports = {
        module:{
            rules:[
                {test:\/\\.css$\/,use:['style-loader','css-loader']},
                {test:\/\\.less$\/,use:['style-loader','css-loader','less-loader']}
                {test:\/\\.scss$\/,use:['style-loader','css-loader','sass-loader']}
            ]
        }
    }<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    webpack \u89e3\u6790 \u56fe\u7247\u548c\u5b57\u4f53<\/h2>\n\n\n\n
    \u5b89\u88c5<\/p>\n\n\n\n
    npm install url-loader [file-loader] --save-dev<\/code><\/pre>\n\n\n\n
    url-loader \u53ef\u4ee5\u8bbe\u7f6e\u8f83\u5c0f\u8d44\u6e90\u81ea\u52a8\u8f6c\u6210 base64<\/p>\n\n\n\n
    \u914d\u7f6e webpack.confing.js \u6587\u4ef6<\/p>\n\n\n\n
    module.exports = {
        module:{
            rules:[
                {test:\/\\.{png|svg|jpg|gif}$\/,use:['file-loader']}
                {test:\/\\.{woff|woff2|eot|ttf|otf}$\/,use:['file-loader']}
                \/*\u6216\u4f7f\u7528 url-loader*\/
                {test:\/\\.{png|svg|jpg|gif}$\/,use:[
                    {
                        loader:\"url-loader\",
                        options:{
                            limit:10240
                        }
                    }]
                }
            ]
        }
    }<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    webpack \u6587\u4ef6\u6307\u7eb9\u7b56\u7565<\/h2>\n\n\n\n
    \u5f62\u5f0f<\/th>\u63cf\u8ff0<\/th><\/tr><\/thead>
    Hash<\/td>\u53ea\u8981\u9879\u76ee\u6587\u4ef6\u6709\u4fee\u6539,\u4f1a\u5c06\u6574\u4e2a\u9879\u76ee\u6784\u5efa\u7684hash\u503c\u66f4\u6539 (\u591a\u7528\u4e8e\u56fe\u7247\u6587\u4ef6\u7684\u6307\u7eb9\u8bbe\u7f6e)<\/td><\/tr>
    Chunkhash<\/td>\u4e0d\u540c\u7684entry\u4f1a\u751f\u6210\u4e0d\u540c\u7684chunkhansh\u503c (\u591a\u7528\u4e8eJS\u6587\u4ef6\u7684\u6307\u7eb9\u8bbe\u7f6e)<\/td><\/tr>
    Contenthash<\/td>\u6839\u636e\u6587\u4ef6\u5185\u5bb9\u6765\u5b9a\u4e49hash, \u6587\u4ef6\u5185\u5bb9\u4e0d\u53d8,\u5219contenthash\u4e0d\u53d8 (\u591a\u7528\u4e8eCSS\u6587\u4ef6\u7684\u6307\u7eb9\u8bbe\u7f6e)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    \u5360\u4f4d\u7b26\u540d\u79f0<\/th>\u542b\u4e49<\/th><\/tr><\/thead>
    [ext]<\/td>\u8d44\u6e90\u540e\u7f00\u540d<\/td><\/tr>
    [name]<\/td>\u6587\u4ef6\u540d\u79f0<\/td><\/tr>
    [path]<\/td>\u6587\u4ef6\u7684\u76f8\u5bf9\u8def\u5f84<\/td><\/tr>
    [folder]<\/td>\u6587\u4ef6\u6240\u5728\u7684\u6587\u4ef6\u5939<\/td><\/tr>
    [contenthash]<\/td>\u6587\u4ef6\u7684\u5185\u5bb9hash,\u9ed8\u8ba4\u662fmd5\u751f\u6210<\/td><\/tr>
    [hash]<\/td>\u6587\u4ef6\u7684\u5185\u5bb9Hash,\u9ed8\u8ba4\u662fmd5\u751f\u6210<\/td><\/tr>
    [emoji]<\/td>\u4e00\u4e2a\u968f\u673a\u7684\u6307\u4ee3\u6587\u4ef6\u5185\u5bb9\u7684emoj<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    \u5b89\u88c5<\/p>\n\n\n\n
    npm install mini-css-extract-plugin --save-dev<\/code><\/pre>\n\n\n\n
    \u914d\u7f6e webpack.config.js<\/p>\n\n\n\n
    const MiniCssExtractPlugin = require(\"mini-css-extract-plugin\")
    module.exports = {
        mode:'production'
        module:{
            rules:[
                {test:\/\\.css$\/,use:[MiniCssExtractPlugin.loader,'css-loader']},
                {test:\/\\.less$\/,use:[MiniCssExtractPlugin.loader,'css-loader','less-loader']},
                {test:\/\\.{png|svg|jpg|gif}$\/,use:[
                    {
                        loader:'file-loader',
                        options:{
                            name:'[name]_[hash:8].[ext]'
                        }
                    }
                ]},
                {test:\/.\\{woff|woff2|eot|ttf|otf}$\/,use:[
                    {
                        loader:'file-loader',
                        options:{
                            name:'[name]_[hash:8].[ext]'
                        }
                    }
                ]}
            ]
        },
        plugins:[
            new MiniCssExtractPlugin({
              filename:'[name]_[contenthase:8].css'
            })
        ]
    }<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    webpack\u538b\u7f29 JS\u3001CSS\u3001html\u4ee3\u7801<\/h2>\n\n\n\n
    \u538b\u7f29 JS \u4ee3\u7801<\/h3>\n\n\n\n
    \u4f7f\u7528webpack \u538b\u7f29 JS \u4ee3\u7801\uff0c webpack4\u63a8\u8350\u4f7f\u7528 uglifyjs-webpack-plugin \u8fdb\u884cJS\u7684\u4ee3\u7801\u538b\u7f29\uff0cwebpack5\u4ee5\u4e0a\u63d0\u793a uglifyjs-webpack-plugin \u5373\u5c06\u88ab\u5e9f\u5f03\uff0cterser-webpack-plugin \u5c06\u7528\u6765\u66ff\u4ee3\u524d\u8005 \u8fdb\u884cJS\u7684\u4ee3\u7801\u538b\u7f29\u3002\u4e0b\u9762\u7684\u914d\u7f6ewebpack5\u73af\u5883\u4e3a\u4f8b<\/p>\n\n\n\n
    \u5b89\u88c5<\/p>\n\n\n\n
    np install terser-webpack-plugin --save-dev<\/pre>\n\n\n\n
    \u5728 webpack.config.js \u4e2d\u914d\u7f6e<\/p>\n\n\n\n
    const TerserPlugin = require(\"terser-webpack-plugin\");
    module.exports = {
        optimization:{
            minimizer: [new TerserPlugin()]
        }
    }<\/pre>\n\n\n\n
    \u538b\u7f29 CSS \u4ee3\u7801<\/h3>\n\n\n\n
    \u4f7f\u7528 webpack \u538b\u7f29 CSS \u4ee3\u7801, webpack4 \u63a8\u8350 optimize-css-assets-webpack-plugin + cssnano \u8fdb\u884c\u4ee3\u7801\u538b\u7f29\uff1bwebpack5 \u4f7f\u7528 css-minimizer-webpack-plugin \u6765\u66ff\u6362\uff0c \u4e0b\u9762\u7684\u914d\u7f6e\u4ee5 webpack5 \u73af\u5883\u4e3a\u4f8b\u3002<\/p>\n\n\n\n
    \u5b89\u88c5<\/p>\n\n\n\n
    npm install css-minimizer-webpack-plugin --save-dev<\/code><\/pre>\n\n\n\n
    \u5728 webpack.config.js \u4e2d\u914d\u7f6e<\/p>\n\n\n\n
    const CssMinimizerPlugin = require(\"css-minimizer-webpack-plugin\");
    module.exports = {
        optimization:{
            minimizer:[
                new CssMinimizerPlugin()
            ]
        }   
    }<\/code><\/pre>\n\n\n\n
    \u538b\u7f29 HTML<\/h3>\n\n\n\n
    \u4f7f\u7528 webpack \u538b\u7f29 HTML \u4ee3\u7801<\/p>\n\n\n\n
    \u5b89\u88c5<\/p>\n\n\n\n
    npm install html-webpack-plugin --save-dev<\/code><\/pre>\n\n\n\n
    \u5728 webpack.config.js \u4e2d\u914d\u7f6e<\/p>\n\n\n\n
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    module.exports = {
        plugins:[
            new HtmlWebpackPlugin({
              template:path.join(__dirname,'src\/index.html'),
              filename:'index.html',
              chunks:['index'],
              inject:true,
              minify:{
                html:true,
                collapseWhitespace:true,
                preserveLineBreaks:false,
                minfiyCss:true,
                mininfy:true,
                removeComments:false
              }
            })
        ]
    }<\/code><\/pre>\n\n\n\n
    <\/p>\n","protected":false},"excerpt":{"rendered":"
    \u89e3\u6790ES6 \u548c React JSX \u89e3\u6790 CSS\u3001Less \u548c Sass \u89e3\u6790\u56fe\u7247\u548c\u5b57\u4f53 \u6587\u4ef6\u6307\u7eb9\u7b56\u7565 JS\u3001 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[37],"tags":[],"class_list":["post-282","post","type-post","status-publish","format-standard","hentry","category-webpack"],"_links":{"self":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/282","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=282"}],"version-history":[{"count":0,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/282\/revisions"}],"wp:attachment":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=282"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=282"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=282"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}