webpack --Charlie

最新推荐文章于 2024-10-13 22:44:57 发布

Charli222222222

最新推荐文章于 2024-10-13 22:44:57 发布

阅读量242

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_42029487/article/details/88536217

本文详细介绍Webpack的安装与配置，涵盖加载器、插件、模块解析、环境配置等关键环节，适用于构建现代Web应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Install:

yarn add webpack webpack-cli babel-loader @babel/core -D

压缩输出：
+mode: “production”

Load css:

yarn add style-loader css-loader -D

+module: {

+rules:[

+       {
+         test: /\.css$/,
+         use: [
+           'style-loader',
+           'css-loader'
+         ]
+       }
+     ]
+   }

+]
+}

Load img:
yarn add file-loader -D

+       {
+         test: /\.(png|svg|jpg|gif)$/,
+         use: [
+           'file-loader'
+         ]
+       }

Load font:

+       {
+         test: /\.(woff|woff2|eot|ttf|otf)$/,
+         use: [
+           'file-loader'
+         ]
+       }

Load csv,tsv,xml:
yarn add csv-loader xml-loader -D

+       {
+         test: /\.(csv|tsv)$/,
+         use: [
+           'csv-loader'
+         ]
+       },
+       {
+         test: /\.xml$/,
+         use: [
+           'xml-loader'
+         ]
+       }

Load es6:
yarn add @babel/core babel-loader @babel/preset-env -D

+{
        +        test:/(\.jsx|\.js)$/,
        +        use:{
            +        loader:"babel-loader",
          +          options:{
          +              presets:[
            +                "@babel/preset-env"
             +           ],
			plugins:[
				‘@babel/plugin-proposal-class-properties’
			]
             +       }
           +     },
          +      exclude:path.resolve(__dirname,"node_modules"),
          +      include:path.resolve(__dirname,"src")
+}

Es7:
yarn add @babel/plugin-proposal-class-properties -D
yarn add @babel/plugin-proposal-decorators -D
yarn add @babel/plugin-transform-runtime -D
yarn add @babel/runtime
yarn add @babel/polyfill (补丁)

               + plugins:[
		+ ["@babel/plugin-proposal-decorators", { "legacy": true }],
			+ ["@babel/plugin-proposal-class-properties", { "loose" : true }],
                   + [
                       + "@babel/plugin-transform-runtime",
                      +  {
                       +   "corejs": false,
                        +  "helpers": true,
                       +   "regenerator": true,
                       +   "useESModules": false
                      +  }
                  +    ]

               + ]

（装饰器报错：vscose settings 搜 experimentalDecorators,ranh 勾选就好了）
Load less/sass:
yarn add less less-loader -D
yarn add sass node-sass sass-loader -D

+{
            +test: /\.less$/,
           + use: ['style-loader', 'css-loader', 'less-loader']
       + }
or
+{
            +test: /\.less$/,
           + use: ['style-loader', 'css-loader’,‘node-sass’, ‘sass-loader']
       + }

Server:
yarn add webpack-dev-server -D

   + devServer:{//开发服务配置
     +    port:8080,
      +   progress:true,//进度条
      +   contentBase:'./dist',//指向
       +  open:true,//自动打开浏览器
       +  compress:true,//压缩
  +  },

Html plugin:
yarn add html-webpack-plugin -D

let HtmlWebpackPlugin=require(‘html-webpack-plugin’);

   + plugins:[
      +  new HtmlWebpackPlugin({
          +  template:'./src/index.html',
         +   filename:'index.html'//打包后的名字
       + })
  +  ],

Clear /dist:

yarn add clean-webpack-plugin -D
const CleanWebpackPlugin = require(‘clean-webpack-plugin’);

new CleanWebpackPlugin([‘dist’]),

抽离css:
yarn add mini-css-extract-plugin -D
new MiniCssExtractPlugin({
filename:’main.css’
})

表示这几个文件的后缀名可以省略不写:

   + resolve:{
        +extensions:['.js','.jsx','.json'],//表示这几个文件的后缀名可以省略不写
       + alias:{
          +  '@':path.join(__dirname,'./src')//这样@就表示项目根目录中src的这一层路径（绝对路径）
      +  }
  +  },

报错：
Error: getaddrinfo ENOTFOUND localhost
at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:57:26)
Emitted ‘error’ event at:
at GetAddrInfoReqWrap.doListen [as callback] (net.js:1438:12)
at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:57:17)

修改hosts文件
127.0.0.1 localhost
右键访达前往文件夹
/etc 找到hosts文件
修改点弹框复制
修改新文件保存后拷贝替换原文件
host文件
Or也可以直接用ihosts修改

Eslint:
yarn add eslint-loader eslant -D

   + {
      +  test:/(\.jsx|\.js)$/,
      +  use:{
        +    loader:'eslint-loader',
         +   options:{
         +       enforce:"pre"//previous 先执行
            +    //post 后执行                        
         +   }
      +  },
 +   },

全局变量问题：

1）expose-loader 暴露到window上
2）providePlugin给每个人提供一个$
3）cdn引入不打包

react相关
yarn add react react-dom redux react-redux react-router-dom antd react-dev-utils react-app-polyfill
yarn add @babel/preset-react @babel/plugin-syntax-dynamic-import -D
yarn add add babel-plugin-import -D
yarn add less@^2.7.3
js的module rules 里的plugins里添加
[‘import’,{libraryName:‘antd’, style:true}]