webpack 4系列笔记（1）loader

npm init -y 初始化package.json; -y是代表yes,跳过提问阶段

webpack 4.x版本之后，需要再额外安装一个webpack-cli

--save => -S 保存至dependencies

-dev --save => -D 保存至devDependencies

output: { 
    filename: 'main.js', 
    path: path.resolve(__dirname, 'dist') 
} 

// 第二个path用的是node里面的path, resolve就是将路径转化为绝对路径 
// const path = require('path');

npx 是npm v5.2.0引入的一条命令，用来执行依赖包（node_modules）里面的二进制文件；这样就不需要配置scripts。当在本地安装webpack后，能够从node_modules/.bin/webpack访问bin版本。所以webpack不推荐全局安装。

注意：当node版本为v7.10.0时，npm版本是v4.2.0, 用不了npx; 当node版本是v8.15.0，npm版本是v6.4.0,则可以用npx

npx webpack

目前安装到的最新的webpack版本是：v4.35.2

css-loader, style-loader

三种样式： 
// 外部样式 
<link rel="stylesheet" type="text/css" href="css/mystyle.css"/> 

// 内部样式 
<style type="text/css"> p{ color: crimson; } </style> 

// 内联样式 
<a style="color:blue;" target="_blank" href="http://www.baidu.com" >百度：http://www.baidu.com</a> 


优先级：内联样式 > 内部样式 > 外部样式

css-loader: 加载.css文件

style-loader: 使用将css-loader解析出来的css样式以<style></style>内部样式方式去注入到我们的HTML页面的head标签里面.

注意：style-loader有分类，style-loader是以<style></style>标签内部样式引入；style-loader/url是以link标签的外部样式引入；但是采用这种方式需要将css-loader变成file-loader，不推荐；因为如果一个js文件中引入多个css文件就会生成多个link标签，而html每个link标签都会发送一次网络请求，所以不推荐。

webpack是自下而上解析的（从右到左），先解析css-loader,再到style-loader

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

 

css-loader和style-loader区别：

https://blog.csdn.net/TyrionJ/article/details/79288287

 

sass-loader, node-sass:

sass-loader是webpack中的一种loader，将sass编译成css;

node-sass是将scss编译成css。使用@import ...

 

sourceMap:

css-loader和sass-loader都可以在options属性中开启sourceMap,这样可以使你看到每个样式所在的代码位置.

module: { 
    rules: [ 
        { 
            test: /\.(sa|sc|c)ss$/, 
            use: [ 
                'style-loader', { 
                    loader: 'css-loader', 
                    options: { 
                        sourceMap: true 
                    }
                 }, { 
                    loader: 'postcss-loader', 
                    options: { 
                        ident: 'postcss', 
                        sourceMap: true, 
                        plugins: loader => [ 
                            require('autoprefixer')({ overrideBrowserslist: ['> 0.15% in CN'] }) // 添加前缀, 在中国浏览器占比大于0.15% 使用autoprefixer 
                        ] 
                    } 
                 }, { 
                    loader: 'sass-loader', 
                    options: { 
                        sourceMap: true 
                    } 
                 } 
              ] 
         }
     ] 
}

 

PostCSS处理loader:

可以附带css3前缀，预处理工具。可以给css3的属性添加前缀（autoprefixer），样式格式校验(stylelint)，提前使用css新特性：表格布局，更重要的是可以实现css的模块化，防止css样式冲突。

 

此报错，将browsers改成overrideBrowserslist就可以了

 

样式表抽离成专门的单独文件并且设置版本号：

webpack4使用：mini-css-extract-plugin插件；webpack1-3使用：extract-text-webpack-plugin插件。

MiniCssExtractPlugin.loader 将css抽离出来css文件，然后在html上以link标签引入。

 

CSS压缩：optimize-css-assets-webpack-plugin

同一个类名下的css合并；空格换行去除；

 

JS压缩：uglifyjs-webpack-plugin  现使用 tenser-webpack-plugin

weback默认的webpack.optimize.UglifyJsPlugin不能压缩es6的代码文件。顺着这个思路只要我们把es6的代码用babel转换成es5即可。

原因肯定还是在webpack.config.js上。经过反复观测发现。问题出现在了loader配置上，loader上有一项是配置js文件转换的。我尝试使用了babel-loader去转换，再压缩，还是会报错。得到官方的回答：webpack4已经不支持使用移除 webpack.optimize.UglifyJsPlugin 压缩配置了, 推荐使用 optimization.minimize 属性替代 并安装最新版本插件。

webpack.optimize.UglifyJsPlugin has been removed, please use config optimization.minimize instead

注意：在webpack4.0版本中已经废弃了之前 UglifyJsPlugin和CommonsChunkPlugin用法

 

可以使用tenser-webpack-plugin来替换：

optimization: { 
    minimizer: [ 
        new TerserPlugin({ 
            cache: true, 
            parallel: true, 
            sourceMap: true, // Must be set to true if using source-maps in production 
            terserOptions: { // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions 
        } 
        }), 
    ], 
}

 

解决css文件和js文件名字哈希值变化的问题：html-webpack-plugin插件

将打包好的js和css文件，通过link标签或者script标签直接注入到我们的html页面中，这样就不用我们每次手动修改文件引用了。

plugins: [ 
    new HtmlWebpackPlugin({ 
        title: 'AICODER 全栈线下实习', // 默认值：Webpack App 
        filename: 'main.html', // 默认值： 'index.html' 
        template: path.resolve(__dirname, 'src/main.html'), 
        minify: { 
            collapseWhitespace: true, // 换行及空格去除 
            removeComments: true, // 移除注释 
            removeAttributeQuotes: false // 移除属性的双引号 
        } 
    }) 
],

 

清理dist目录：clean-webpack-plugin

const { CleanWebpackPlugin } = require("clean-webpack-plugin"); 

... 

plugins: [ 
    new CleanWebpackPlugin() 
]

 

报错：CleanWebpackPlugin is not a constructor.

// 抛错原写法 
const CleanWebpackPlugin = require("clean-webpack-plugin"); 

... 

plugins: [ new CleanWebpackPlugin(['dist']) ] 

... 


// 另一种错误写法 

const CleanWebpackPlugin = require("clean-webpack-plugin"); 

... 

plugins: [ 
    new CleanWebpackPlugin(['dist'], { 
        root: path.resolve(__dirname, '../'), //根目录 
    }) 
] 

... 


// =============================分割线============================== 

// 正确写法 

const { CleanWebpackPlugin } = require("clean-webpack-plugin"); 

... plugins: [ 

    new CleanWebpackPlugin() 
]