webpack（4） 配置

构建webpac时  先 npm install  然后 要引入  webpack  webpack-cli

 

css-loader 3版本后

　　发现 localIdentName要写在modules里  并且不用写modules:true 也可以开启css modules

                      modules: {localIdentName: '[path]-[name]-[hash:base64:5]'  }

　　　　如：{

                test: /\.(styl|stylus)$/,

                use: ExtractPlugin.extract({

                    fallback: 'vue-style-loader',

                    use: [

                        {

                            loader: 'css-loader',

                            options: {

                                modules: {

                                    localIdentName: '[path]-[name]-[hash:base64:5]'   //类名

                                }

                            }

                        },

　　　　　　　'postcss-loader',

                        'stylus-loader'

                    ]

                })

            },

 

babel-loader 8 以上要使用  @babel/core   （.js .jsx ... 要使用babel-loader 转换  ）

 

使用postcss-loader 插件 --后处理css css编译完成后（stylus -> css） 通过autoprefixer优化-->css属性加前缀（兼容浏览器）

　　可以在外面加上postcss.config.js文件来配置

　　　　const autoprefixer = require('autoprefixer')

　　　　module.exports = {

  　　　　plugins: [

    　　　　autoprefixer()

  　　　　]

　　　　}

 

在vue项目中 样式的代码需要经过vue-style-loader的转换

 

处理图片 需要引入url-loader 和 file-loader

　　用法

　　　　{

                test: /\.(gif|jpg|jpeg|png|svg)$/,

                use: [{

                    loader: 'url-loader',

                      options: {

                        limit: 1024,

                        name: 'resources/[path][name].[hash:8].[ext]'

                      }

                }]

            }

 

Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的

 

vue 去掉元素之间的空格

　　{　　　

　　　test: /\.vue$/,

       　loader: "vue-loader",

　　options: {
  　　compilerOptions: {
   　　　　 preserveWhitespace: false
  　　}
　　}

　　}

　

 

 

打包生成html文件  html-webpack-plugin  并且在plugins中实例化

 

单独打包css文件(非js文件)  引入extract-text-webpack-plugin这个插件  extract-text-webpack-plugin还不能支持webpack4.0.0以上的版本 

　　安装extract-text-webpack-plugin@next    (webpack4推荐使用mini-css-extract-plugin)

　　使用 ：

　　　　引入  const ExtractPlugin = require('extract-text-webpack-plugin')

　　　　　　 module中    test:/...需要打包成css文件./  , use:ExtractPlugin.extract（{loader....}）

　　　　　　在plugins中实例化  --- new ExtractPlugin('styles.[hash:5].css')   -----css文件名