复习webpack的常用loader

Posted 2020-10-09 瓶子2333

今天复习了下webpack的常用loaders，其实习惯ES6开发的话，webpack的config.js基础配置应该是比较固定：

首先是JS，我们ES6要转为ES5，需要用到babel转码：

1.

npm install --save-dev babel-loader babel-core

2.在config.js中配置：

1 module: {
2   rules: [
3     { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
4   ]
5 }

3.配置babel的preset：

npm install babel-preset-env --save-dev

4.项目目录下创建.babelrc文件，内容为：

1 {
2   "presets": ["env"]
3 }

5.当我们需要用到promise、map或ES6数组方法的时候，还要下载polyfill：

npm install --save babel-polyfill

6.使用polifill时候，要在entry中引入：

module.exports = {
  entry: ["babel-polyfill", "./app/js"]
};

 

其次是css方面的loaders:

1.

npm i css-loader style-loader --save-dev

2.如果想使用预处理器比如sass：

npm i sass-loader node-sass --save-dev

*node-sass最近几个版本安装可能会报错，我今天就遇到，github也有网友反映了这问题（见上篇）

*使用sass要先安装ruby，然后命令行gem sass （这不影响我们在项目的webpack中使用sass）

 

3.postcss-loader是必须的，除非你想每个新的css3样式都查前缀：

npm i postcss-loader autoprefixer --save-dev

使用postcss的时候，文档推荐创建本地postcss-config.js配置文件，这样在webpack.config.js中在需要postcss-loader的时候直接调用就好了：

1 module.exports = {
2   plugins: [
3     require(‘autoprefixer‘)
4   ]
5 }

 

然后是文件方面的,帮我们处理图片等：

npm i file-loader url-loader --save-dev

 

最后配置的config文件是：

 1 const path=require(‘path‘);
 2 module.exports={
 3     entry:[‘babel-polyfill‘,‘./js/a.js‘],
 4     output:{
 5         path:path.resolve(__dirname,‘dist‘),
 6         filename:‘[name].js‘
 7     },
 8     module: {
 9       rules: [
10       { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
11 
12       {test:/\.css$/,use:[‘style-loader‘,‘css-loader‘,‘postcss-loader‘]},
13 
14       {test:/\.scss$/,
15           use:[‘style-loader‘,
16           {loader:‘css-loader‘,options:{importLoaders:2}},
17           ‘postcss-loader‘,‘sass-loader‘]
18       },
19       //url
20       {
21         test: /\.(png|jpg|gif)$/,
22         use: [
23           {
24             loader: ‘url-loader‘,
25             options: {
26               limit: 8192
27             }  
28           }
29         ]
30       },
31 
32       {
33         test: /\.(png|jpg|gif)$/,
34         use: [
35           {
36             loader: ‘file-loader‘,
37             options: {
38               name: ‘[path][name].[ext]‘,
39               outputPath: ‘images‘
40       }  
41           }
42         ]
43       }
44       
45     ]
46 }
47 
48 }