{"id":467,"date":"2022-08-28T20:47:09","date_gmt":"2022-08-28T12:47:09","guid":{"rendered":"http:\/\/gjweb.top\/?p=467"},"modified":"2022-08-28T20:47:10","modified_gmt":"2022-08-28T12:47:10","slug":"webpack%e5%9f%ba%e6%9c%ac%e6%a6%82%e5%bf%b5%e5%8f%8a%e5%bc%80%e5%8f%91%e9%85%8d%e7%bd%ae","status":"publish","type":"post","link":"https:\/\/gjweb.top\/?p=467","title":{"rendered":"webpack\u57fa\u672c\u6982\u5ff5\u53ca\u5f00\u53d1\u914d\u7f6e"},"content":{"rendered":"\n
  1. \u57fa\u672c\u6982\u5ff5<\/li>
  2. webpack \u914d\u7f6e\u6846\u67b6<\/li>
  3. \u89e3\u6790 css \u6837\u5f0f<\/li>
  4. \u89e3\u6790 less \/ sass \u6587\u4ef6<\/li>
  5. webpack \u6253\u5305\u56fe\u7247\u8d44\u6e90<\/li>
  6. webpack \u6253\u5305\u5176\u4ed6\u8d44\u6e90<\/li>
  7. webpack \u914d\u7f6e devServer<\/li>
  8. webpack \u5355\u72ec\u6253\u5305css\u6587\u4ef6<\/li>
  9. webpack \u538b\u7f29 css \u6587\u4ef6<\/li>
  10. webpack \u68c0\u67e5 eslint<\/li>
  11. \u6784\u5efa\u57fa\u7840 webpack \u5f00\u53d1\u914d\u7f6e<\/li><\/ol>\n\n\n\n

    1. \u57fa\u672c\u6982\u5ff5<\/h2>\n\n\n\n
    • entry \u5165\u53e3<\/li>
    • output \u51fa\u53e3
      • filname \u6253\u5305\u540e\u7684 js \u8def\u5f84\u548c\u6587\u4ef6\u540d<\/li>
      • path \u6253\u5305\u540e\u6574\u4f53\u8f93\u51fa\u7684\u6587\u4ef6\u5939<\/li><\/ul><\/li>
      • loader \u4f7f\u7528 webpack \u80fd\u5904\u7406\u7684\u975e JS \u6587\u4ef6<\/li>
      • plugin \u6267\u884c loader \u5904\u7406\u4e0d\u4e86\u7684\u529f\u80fd<\/li>
      • mode
        • process.NODE_ENV === development \u5f00\u53d1\u6a21\u5f0f<\/li>
        • process.MODE_ENV === production \u751f\u4ea7\u6a21\u5f0f<\/li><\/ul><\/li><\/ul>\n\n\n\n
          \n\n\n\n

          2. webpack \u914d\u7f6e\u6846\u67b6<\/h2>\n\n\n\n

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

          npm install webpack webpack-cli -g
          npm install webpack webpack-cli -D<\/code><\/pre>\n\n\n\n
          const {resolve} = require(\"path\")
          module.exports = {
              entry:\"\", \/\/ \u5165\u53e3\u6587\u4ef6
              output:{
                  filename:\"\",
                  path:resolve(__dirname,\"dist\")
              },
              module:{
                  rules:{}
              },
              plugins:[],
              mode:'development\"
              mode:\"production\"
          }<\/code><\/pre>\n\n\n\n
          \n\n\n\n
          3. \u89e3\u6790css\u6837\u5f0f<\/h2>\n\n\n\n
          \u5b89\u88c5\u4f9d\u8d56<\/p>\n\n\n\n
          yarn add style-loader css-loader -D<\/code><\/pre>\n\n\n\n
          webpack.config.js \u4e2d\u6dfb\u52a0<\/p>\n\n\n\n
          module.export = {
              entry:'.\/src\/js\/index.js',
              output:{
                  filename:'js\/index.js',
                  path:resolve(__dirname,\"dist\")
              },
              module:{
                  rules:[
                      {test:\/\\.css$\/,use:[\"style-loader\",\"css-loader\"]}
                  ]
              }
          }<\/code><\/pre>\n\n\n\n
          \n\n\n\n
          4. \u89e3\u6790 less \/ sass \u6837\u5f0f<\/h2>\n\n\n\n
          \u5b89\u88c5\u4f9d\u8d56<\/p>\n\n\n\n
          yarn add style-loader css-loader less less-loader sass sass-loader -D<\/code><\/pre>\n\n\n\n
          webpack.config.js<\/p>\n\n\n\n
          module:{
              rules:[
                  {test:\/\\.less$\/,use:[\"style-loader\",\"css-loader\",\"less-loader\"]},
                  {test:\/\\.sass$\/,use:[\"style-loader\",\"css-loader\",\"sass-loader\"]}
              ]
          }<\/code><\/pre>\n\n\n\n
          \n\n\n\n
          5. \u6253\u5305\u56fe\u7247\u8d44\u6e90<\/h2>\n\n\n\n
          \u5b89\u88c5\u4f9d\u8d56<\/p>\n\n\n\n
          yarn add url-loader html-withimg-webpack file-loader -D<\/code><\/pre>\n\n\n\n
          webpack.config.js<\/p>\n\n\n\n
          module:{
              rules:[
                  {
                      test:\/\\.(png|jpg)$\/,
                      loader:\"url-loader\",
                      potions:{
                          limit:10 * 1024 , \/\/ \u5c0f\u4e8e10KB\u7684\u56fe\u7247\u8f6c\u4e3abase64
                          esModule:false
                      }
                  },
                  {
                      test:\/\\\/html$\/,
                      loader:\"html-withimg-loader\"
                  }
              ]
          }<\/code><\/pre>\n\n\n\n
          \n\n\n\n
          6. webpack \u6253\u5305\u5176\u4ed6\u8d44\u6e90<\/h2>\n\n\n\n
          \u5b89\u88c5\u4f9d\u8d56<\/p>\n\n\n\n
          yarn add file-loader -D<\/pre>\n\n\n\n
          webpack.config.js<\/p>\n\n\n\n
          module:{
              rules:[
                  {
                      exculde:\/\\.(png|jpg|html|js|css|less|scss)$\/,
                      loader:\"file-loader\"
                  }
              ]
          }<\/pre>\n\n\n\n
          \n\n\n\n
          7.webpack \u914d\u7f6e devServer<\/h2>\n\n\n\n
          \u5b89\u88c5\u4f9d\u8d56<\/p>\n\n\n\n
          yarn  add webpack-dev-server -D<\/code><\/pre>\n\n\n\n
          webpack.config.js \u914d\u7f6e<\/p>\n\n\n\n
          module.exports={
              entry:\"\",
              output:{
                  filename:\"\",
                  path:resolve(__dirname,\"dist\")
              },
              module:{
                  rules:[]
              },
              plugins:[],
              mode:\"development\",
              devServer:{
                  staitc:reslove(__dirname,\"dist\"), \/\/ dist \u6307\u7684\u662f\u6253\u5305\u7684\u6587\u4ef6\u5939\u540d\u79f0
                  open:true, \/\/ \u6253\u5f00\u65b0\u7a97\u53e3
                  compress:true, \/\/ \u5f00\u542fgzip\u538b\u7f29
                  port:3000, \/\/ \u7aef\u53e3\u53f7
              }
          }<\/code><\/pre>\n\n\n\n
          \u8fd0\u884c<\/p>\n\n\n\n
          npx webpack-dev-server<\/code><\/pre>\n\n\n\n
          8. webpack \u63d0\u53d6 css \u4e3a\u5355\u72ec\u6587\u4ef6<\/h2>\n\n\n\n
          \u5b89\u88c5\u4f9d\u8d56<\/p>\n\n\n\n
          yarn add mini-css-extract-plugin -D<\/code><\/pre>\n\n\n\n
          webpack.config.js \u914d\u7f6e<\/p>\n\n\n\n
          const MiniCssExtractPlugin = require(\"mini-css-extract-plugin\")
          module:{
              rules:[
                  {test:\/\\.css$\/,use:[
                      MiniCssExtractPlugin.loader,
                      \"css-loader\"
                  ]}
              ]
          },
          plugins:[
              new MiniCssExtractPlugin({
                  filename:\"css\/index.css\" \/\/ \u6253\u5305\u540e\u7684 css \u8def\u5f84\u548c\u6587\u4ef6\u540d
              })
          ]<\/code><\/pre>\n\n\n\n
          \n\n\n\n
          9. webpack \u538b\u7f29 css \u6587\u4ef6<\/h2>\n\n\n\n
          \u5b89\u88c5\u4f9d\u8d56<\/p>\n\n\n\n
          yarn add optimize-css-assets-webpack-plugin<\/code><\/pre>\n\n\n\n
          \u914d\u7f6e webpack.config.js<\/p>\n\n\n\n
          const  OptimizeCssAssetsWebpackPlugin = require(optimize-css-assets-webpack-plugin)
          plugins:[
              new OptimizeCssAssetsWebpackPlugin()
          ]<\/code><\/pre>\n\n\n\n
          \n\n\n\n
          10. webpack \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\":\"airdnd-base
              }
          }<\/code><\/pre>\n\n\n\n
          \u914d\u7f6e webpack.config.js<\/p>\n\n\n\n
          const EslintWebpackPlugin = require(\"eslint-webpack-plugin\")
          plugin:[
              new EslintWebpackPlugin({
                  fix:true, \/\/ \u81ea\u52a8\u4fee\u590d\u4e0d\u7b26\u5408\u89c4\u8303\u7684\u5199\u6cd5
              })
          ]<\/code><\/pre>\n\n\n\n
          \n\n\n\n
          11. webpack \u914d\u7f6e\u57fa\u672c\u7684\u751f\u4ea7\u73af\u5883<\/h2>\n\n\n\n
          \u5b89\u88c5\u5168\u90e8\u4f9d\u8d56<\/p>\n\n\n\n
          yarn add webpack webpack-cli webpack-dev-serevr less less-loader sass sass-loader style-loader css-loader url-loader file-loader html-withimg-loader html-webpack-plugin mini-css-extract-plugin optimize-css-assets-webpack-plugin eslint-config-airbnb-base eslint-plugin-import eslint-webpack-plugin -D<\/code><\/pre>\n\n\n\n
          \u914d\u7f6e webpack.config.js<\/p>\n\n\n\n
          const HtmlWebpackPlugin = require(\"html-webpack-plugin\");
          const {resolve} = require(\"path\");
          module.exports = {
            entry:\".\/src\/js\/index.js\",
            output:{
              filename:\"js\/dist.js\",
              path:resolve(__dirname,\".\/dist\")
            },
            module:{
              rules:[
                {
                  test:\/\\.css$\/,
                  use:[
                    \"style-loader\",
                    {
                      loader:'css-loader',
                      options:{
                        esModule:false,
                      }
                    }
                  ]
                },
                {
                  test:\/\\.less$\/,
                  use:[
                    'style-loader',
                    {
                      loader:'css-loader',
                      options:{
                        esModule:false,
                      }
                    },
                    \"less-loader\"
                  ]
                },
                {
                  test:\/\\.(png|jpg)$\/,
                  loader:'url-loader',
                  options:{
                    limit:10*1024,
                    esModule:false,
                    outputPath:\"img\"
                  }
                },
                {
                  test:\/\\.html$\/,
                  use:[\"html-withimg-loader\"]
                },
                {
                  exclude:\/\\.(js|html|css|less|html|png|jpg)$\/,
                  loader:'file-loader',
                  options:{
                    outputPath:\"other\"
                  }
                }
              ]
            },
            plugins:[
              new HtmlWebpackPlugin({
                template:\".\/src\/index.html\"
              })
            ],
            mode:'development',
            devServer:{
              static:resolve(__dirname,\"dist\"),
              compress:true,
              port:3000,
              open:true
            }
          }<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
          \u57fa\u672c\u6982\u5ff5 webpack \u914d\u7f6e\u6846\u67b6 \u89e3\u6790 css \u6837\u5f0f \u89e3\u6790 less \/ sass \u6587\u4ef6 webpack \u6253 […]<\/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-467","post","type-post","status-publish","format-standard","hentry","category-webpack5"],"_links":{"self":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/467","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=467"}],"version-history":[{"count":1,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/467\/revisions"}],"predecessor-version":[{"id":468,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/467\/revisions\/468"}],"wp:attachment":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=467"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=467"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=467"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}