{"id":469,"date":"2022-08-29T22:43:17","date_gmt":"2022-08-29T14:43:17","guid":{"rendered":"http:\/\/gjweb.top\/?p=469"},"modified":"2022-08-29T22:43:18","modified_gmt":"2022-08-29T14:43:18","slug":"02-webpack-%e5%9f%ba%e7%a1%80%e6%a6%82%e5%bf%b5%e5%8f%8a%e7%94%9f%e4%ba%a7%e6%a8%a1%e5%bc%8f%e7%9a%84%e9%85%8d%e7%bd%ae","status":"publish","type":"post","link":"https:\/\/gjweb.top\/?p=469","title":{"rendered":"02. webpack \u57fa\u7840\u6982\u5ff5\u53ca\u751f\u4ea7\u6a21\u5f0f\u7684\u914d\u7f6e"},"content":{"rendered":"\n
  1. js \u68c0\u67e5 Eslint<\/li>
  2. webpack \u517c\u5bb9\u5904\u7406 eslint<\/li>
  3. webpack \u538b\u7f29 html \u548c JS<\/li>
  4. \u751f\u4ea7\u73af\u5883\u914d\u7f6e<\/li><\/ol>\n\n\n\n
    \n\n\n\n

    1. JS \u68c0\u67e5 Eslint<\/h2>\n\n\n\n

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

    yarn add eslint eslint-config-airbnb-base eslint-plugin-import eslint-webpack-plugin -D<\/code><\/pre>\n\n\n\n
    \u914d\u7f6e package.json<\/p>\n\n\n\n
    \"eslintConfig\":{
        \"extends\":\"airbnb-base\"
    }<\/code><\/pre>\n\n\n\n
    \u914d\u7f6e webpack.config.js<\/p>\n\n\n\n
    const EslintPlugin = require(\"eslint-webpack-plugin\")
    plugins:[
        new EslintPlugin({
            fix:true \/\/ \u81ea\u52a8\u4fee\u590d\u4e0d\u5408\u7406\u7684\u5199\u6cd5
        })
    ]<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    2. webpack \u517c\u5bb9\u5904\u7406 js<\/h2>\n\n\n\n
    \u65b9\u5f0f\u4e00\uff1a\u5168\u90e8\u517c\u5bb9\uff08\u7f3a\u70b9\uff1a\u4f1a\u5c06\u6240\u6709\u517c\u5bb9\u4ee3\u7801\u5f15\u5165\uff0c\u4f1a\u589e\u5927\u6587\u4ef6\u4f53\u79ef\uff09<\/p>\n\n\n\n
    \u5b89\u88c5\u4f9d\u8d56<\/p>\n\n\n\n
    yarn add babel-loader @babel\/core @babel\/preset-env @babel\/polyfill -D<\/code><\/pre>\n\n\n\n
    \u5728 webpack.config.js \u4e2d\u914d\u7f6e<\/p>\n\n\n\n
    module:{
        rules:[
            {test:\/\\.js$\/,loader:\"@babel\/polyfill\"}
        ]
    }<\/code><\/pre>\n\n\n\n
    \u65b9\u5f0f\u4e8c\uff1a\u6309\u9700\u52a0\u8f7d\uff08\u63a8\u8350\uff09<\/p>\n\n\n\n
    \u5b89\u88c5\u4f9d\u8d56<\/p>\n\n\n\n
    yarn add babel-loader @babel\/core @babel\/preset-env core-js<\/code><\/pre>\n\n\n\n
    \u5728 webpack.config.js \u4e2d\u914d\u7f6e<\/p>\n\n\n\n
    module:{
        rules:[
            {
                test:\/\\.js$\/,
                exclude:\/node_modules\/
                loader:\"babel-loader\",
                options:{
                    presets:[
                        [
                            \"@babel\/preset-env\",
                            {
                                useBuiltIns:\"usage\",
                                coresjs:{
                                    version:3
                                },
                                targets:{ \/\/ \u6307\u5b9a\u517c\u5bb9\u5230\u54ea\u4e2a\u7248\u672c\u7684\u6d4f\u89c8\u5668
                                    chrome:\"60\",
                                    ie:\"9\"
                                }
                            }
                        ]
                    ]
                }
            }
        ]
        
    }<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    3.webpack \u538b\u7f29 html \u548c js<\/h2>\n\n\n\n
    \u5728webpack.config.js \u4e2d mode:’production’<\/strong> \u6a21\u5f0f\uff0c \u4f1a\u9ed8\u8ba4\u8fdb\u884c JS \u7684\u6253\u5305\u538b\u7f29\uff0c<\/p>\n\n\n\n
    \u4e0b\u9762\u793a\u4f8b\u538b\u7f29html<\/p>\n\n\n\n
    plugins:[
        new HtmlWebpackPlugin({
            template:\".\/src\/index.html\",
            collapseWhitespace\uff1atrue, \/\/ \u79fb\u9664\u7a7a\u683c
            removeComments:true, \/\/\u79fb\u9664\u6ce8\u91ca
        })
    ]<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    4. css \u517c\u5bb9\u5904\u7406<\/h2>\n\n\n\n
    \u5b89\u88c5\u4f9d\u8d56<\/p>\n\n\n\n
    yarn add postcss-loader postcss-preset-env -D<\/code><\/pre>\n\n\n\n
    \u914d\u7f6e package.json<\/p>\n\n\n\n
    \"browsersList\":{
        \"development\":[
            \"lase 1 chrome version\",
            \"lase 1 firefox version\",
            \"lase 1 safari version\"
        ],
        \"production\":[
            \">0.2%\",
            \"not dead\",
            \"not op_mini all\"
        ]
    }<\/code><\/pre>\n\n\n\n
    \u914d\u7f6e webpack.config.js<\/p>\n\n\n\n
    module:{
        rules:[
            {test:\/\\.css$\/,use:[\"style-loader\",\"css-loader\",\"postcss-loader\"]}
        ]
    }
    plugins:[
        require(\"postcss-preset-env\")
    ]<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    5. webpack \u642d\u5efa\u5f00\u53d1\u751f\u4ea7\u73af\u5883<\/h2>\n\n\n\n
    package.json<\/p>\n\n\n\n
     \"eslintConfig\": {
        \"extends\": \"airbnb-base\"
      },
      \"browserslist\": {
        \"development\": [
          \"last 1 chrome version\",
          \"last 1 firefox version\",
          \"last 1 safari version\"
        ],
        \"production\": [
          \">0.2%\",
          \"not dead\",
          \"not op_mini all\"
        ]
      }<\/code><\/pre>\n\n\n\n
    webpack.config.js<\/p>\n\n\n\n
    const HtmlWebpackPlugin = require(\"html-webpack-plugin\");
    const {resolve} = require(\"path\");
    const MiniCssExtractPlugin = require(\"mini-css-extract-plugin\")
    const OptimizeCssAssetsWebpackPlugin = require(\"optimize-css-assets-webpack-plugin\")
    const ESLintPlugin = require(\"eslint-webpack-plugin\")
    const cssLoader = [
      \/\/ \"style-loader\",
      MiniCssExtractPlugin.loader,
      {
        loader:\"css-loader\",
        options:{
          esModule:false
        },
      },
      \"postcss-loader\"
    \u200b
    ]
    module.exports = {
      entry:\".\/src\/js\/index.js\",
      output:{
        filename:\"js\/index.js\",
        path:resolve(__dirname,\"dist\")
      },
      module:{
        rules:[
          {
            test:\/\\.css$\/,
            use:[...cssLoader]
          },
          {
            test:\/\\.less$\/,
            use:[...cssLoader,\"less-loader\"]
          },
          {
            test:\/\\.scss$\/,
            use:[...cssLoader,\"sass-loader\"]
          },
          {
            test:\/\\.(png|jpg)$\/,
            loader:\"url-loader\",
            options:{
              limit:10*1024,
              esModule:false,
              outputPath:\"img\"
            }
          },
          {
            test:\/\\.html$\/,
            loader:'html-withimg-loader'
          },
          {
            test:\/\\.js$\/,
            exclude:\/node_modules\/,
            loader:\"babel-loader\",
            options:{
              presets:[
                [
                  \"@babel\/preset-env\",
                  {
                    useBuiltIns:'usage',
                    corejs:{
                      version:3
                    },
                    targets:{
                      chrome:\"60\",
                      ie:\"9\"
                    }
                  }
                ]
              ]
            }
          },
          {
            exclude:\/\\.(png|jpg|html|js|css|less|scss)$\/,
            loader:'file-loader',
            options:{
              outputPath:'media'
            }
          }
        ]
      },
      plugins:[
        new HtmlWebpackPlugin({
          template:\".\/src\/index.html\",
          collapseWhitespace:true,
          removeComments:true
          
        }),
        new MiniCssExtractPlugin({
          filename:\"css\/index.css\"
        }),
        new OptimizeCssAssetsWebpackPlugin(),
        new ESLintPlugin({
          fix:true
        }),
        require(\"postcss-preset-env\")
      ],
      mode:\"production\",
      devServer:{
        static:resolve(__dirname,\"dist\"),
        open:true,
        compress:true,
        port:3000
      }
    }<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
    js \u68c0\u67e5 Eslint webpack \u517c\u5bb9\u5904\u7406 eslint webpack \u538b\u7f29 html \u548c JS \u751f […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[54],"tags":[],"class_list":["post-469","post","type-post","status-publish","format-standard","hentry","category-webpack5"],"_links":{"self":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/469","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=469"}],"version-history":[{"count":1,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/469\/revisions"}],"predecessor-version":[{"id":470,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/469\/revisions\/470"}],"wp:attachment":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=469"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=469"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=469"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}