webpack 基础常用配置

常用插件

1. page-skeleton-webpck-plugin

引言

webpack默认只能处理js/json 将es module comjs转为游览器认识的模块

五个核心概念

1. entry

• 文件打包入口

2. output

• bundle文件存放目录

3. loader

• 处理文件的包

4. plugin

• 扩展

5. mode

• 分为process.env.NODE_ENV分为development / production

命令

webpack ./index.js(入口) -o ./build --mode=development

处理css less

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

处理静态资源图片

1. file-loader
2. url-loader
3. html-loader

 {
   
    test: /\.(jpg|png|gif)$/,
    loader: 'url-loader',
    options: {
   
        esModule: false,
        name: '[hash:10].[ext]'
    }
},
{
   
    test: /\.html$/,
    loader: 'html-loader'
}

其他静态资源使用file-loader处理

module: {
   
  rules: [
    {
   
      exclude: /\.(html|css|js)$/,
      loader: 'file-loader',
      options: {
   
        name: '[hash:20].[ext]',
        outputPath: 'static/
      }
    }
  ]
}

本地服务器

可以在内存里自动更新代码

  devServer: {
   
        port: 4000,
        contentBase: __dirname + '/dist',
        compress: true,
        // 开启模块热加载, 配置文件更新必须重启webpack
        hot: true
    }

css单独打包成文件

rules: [
{
   
    test: /\.less$/,
    use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        'less-loader'
    ]
}
]
plugins: [
  new MiniCssExtractPlugin({
   
      filename: 'css/main.css'
  })
]

增加css兼容性 postcss-loader postcss-preset-env(从package.json读取配置)

{
   
    test: /\.less$/,
    use: [
        // css压缩单独打包文件
        MiniCssExtractPlugin.loader,
        'css-loader',
        {
    //增加css兼容性
            loader: 'postcss-loader',
            options: {
   
                ident: 'postcss',
                plugins: () => [
                    require('postcss-preset-env')()
                ] 
            }
        },
        'less-loader'
    ]
}

//package.json
"borwserslist": {
   
  "development": [
    "last 1 chrome version