webpack入门

Posted 2022-01-27 longlongdan

1. entry：对象，字符串, 数组（数组会被打包成一个文件，正确的多入口多出口应该使用对象形式）
2. output： path-目标输出的绝对路径，filename-输出文件的文件名：[name]，[hash]，[chunkhash]

   module.exports = 
       entry: ‘./src/index.js‘,
       output: 
           filename: ‘main.js‘,
           path: path.resolve(__dirname, ‘dist‘),
           publicPath: ‘dist/‘
       
   

3. plugin：插件
html-webpack-plugin自动生成html代码。
• filename，inject （放置script标签的地方，head，body，false，true），template，title（htmlWebpackPlugin.options.title可以在html模板里面取值）,minify(压缩，值为一个对象，不可以直接写true，具体配置参考文档)，chunks：引入的js， 我们entry入口的key值，excludeChunks:排除的chunks；

  plugins: [
          new htmlWebpackPlugin(
              filename: ‘index.html‘,
              template: ‘./index.html‘,
              inject: ‘body‘,
              chunks: [‘one‘],
              minify: 
                  removeComments: true,
                  removeAttributeQuotes: true
              
          )
      ]

4. loader：预处理。处理从右到左
   1. css-loader: 处理css文件里面的@import和url之类的
   2. style-loader：将css文件的内容插入style标签内并插入head中
5. babe：presets指定javascript版本，excludes和includes优化速度。babel-loader @babel/core @babel/preset-env这三个都需要安装

   
      test: /\.js$/,
      exclude: /node_modules/,
      use: 
          loader: ‘babel-loader‘,
          options: 
             presets: [‘@babel/preset-env‘]
          
      
   

6. postcss-loader：使用javascript的工具或者插件来预处理css的工具。
7. postcss可以使用的常见插件：https://www.zcfy.cc/article/7-postcss-plugins-to-ease-you-into-postcss-603.html

    module: 
           rules: [
               
                   test: /\.scss$/,
                   use: [
                       ‘style-loader‘,
                       ‘css-loader‘,
                       ‘sass-loader‘,
                        
                           loader: ‘postcss-loader‘,
                           options: 
                               plugins: [
                                   autoprefixer(
                                       overrideBrowserslist: [‘last 10 versions‘]
                                   )
                               ]
                           
                       ,
                   ]
               ,
           ]
   

8. css文件使用@import引入的文件，需要给cssloader加上参数importLoaders=1才可以让引入的文件也添加浏览器前缀，less和scss文件不需要

 

webpack执行命令可以携带的参数

　　使用实例：webpack --progres --colors --xxx

1. --watch 监听变动并自动打包
2. --progress 显示进度条
3. --config XXX.js 指定特定的打包文件来进行打包
4. --color 添加颜色
5. 自定义参数