复习webpack的常用loader

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

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

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:

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

在webpack上处理图片的时候，难免会因为路径问题困惑。

我们知道项目中引用图片有以下几种情景：

1.html的<img src=' ' >

2.css中背景图片引用

3.js中动态创建/生成img

4.行内样式中设置background-image

在webpack使用file-loader对图片打包时：

1.用html-withimg-loader配合htmlWebpackPlugin（见下边代码蓝色部分）

2.css的路径会自动替换

3.js中引用图片的src时，要用require（）

最后配置的config文件是：

 1 var HtmlWebpackPlugin = require('html-webpack-plugin');
 2 const path=require('path');
 3 module.exports={
 4     entry:['babel-polyfill','./src/js/a.js'],
 5     output:{
 6         path:path.resolve(__dirname,'dist'),
 7         filename:'[name].js',
 8     publicPath:'/assets/'
 9     },
10     module: {
11       rules: [
12       { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
13
14       {test:/\.css$/,use:['style-loader','css-loader','postcss-loader']},
15
16       {test:/\.scss$/,
17           use:['style-loader',
18           {loader:'css-loader',options:{importLoaders:2}},
19           'postcss-loader','sass-loader']
20       },
21       //url
22       {
23         test: /\.(png|jpg|gif)$/,
24         use: [
25           {
26             loader: 'url-loader',
27             options: {
28               limit: 8192,
29               name:'[name].[ext]'
30             }
31           }
32         ]
33       },
34       {
35         test: /\.(png|jpg|gif)$/,
36         use: [
37           {
38             loader: 'file-loader',
39             options: {
40               name: 'img/[name].[ext]'
41       }
42           }
43         ]
44       },
45        {
46         test: /\.(htm|html)$/,
47         loader: 'html-withimg-loader'
48     }
49
50     ]
51 },
52 plugins:[
53 new HtmlWebpackPlugin({
54         template: 'html-withimg-loader!' + path.resolve(__dirname, 'index.html'),
55         filename: 'main.html'
56     })
57 ],
58 devServer: {
59     contentBase:__dirname, //浏览器cwd
60     historyApiFallback: true,//不跳转
61     inline: true//实时刷新
62   }
63
64 }

转载于:https://www.cnblogs.com/alan2kat/p/7611099.html

复习webpack的常用loader相关推荐

html loader使用方法,webpack中loader的使用方法，以及几个常用loader的应用小实例
loader:是webpack用来预处理模块的,在一个模块被引入之前,会预先使用loader处理模块的内容. 可能,你会遇到当你用webpack打包的时候,提示你需要一个loader来处理文件,那we ...
24.重学webpack——loader的原理及常用loader的实现（高频面试题）
[重学webpack系列--webpack5.0] 1-15节主要讲webpack的使用,当然,建议结合<webpack学完这些就够了>一起学习. 从本节开始,专攻webpack原理,只有 ...
webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server
一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...
webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server - QxQstar - 博客园
一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...
从水处理速度梯度的公式，复习一下物理学常用公式，擦边爱因斯坦质能方程
欢迎关注,敬请点赞! 从水处理速度梯度的公式,复习一下物理学常用公式,还能擦边爱因斯坦质能方程问题由来倒霉的我,最初碰到的是这个"特不靠谱": 这个公式用起来不方便,于是又搜到 ...
计算机vb知识点,2020年全国计算机二级VB复习知识点：常用内部函数
[摘要] 小编整理了2020年全国计算机二级VB复习知识点:常用内部函数的相关内容,下面一起来看看2020年全国计算机二级VB复习知识点:常用内部函数的具体内容吧,希望能够帮助到大家! 2020年全国 ...
需要了解的常用Webpack插件配置-loader加载器
我们都知道通过安装和配置第三方插件,可以使我们的webpack拓展更多的功能,虽然之后开发项目不需要我们自己去进行这些繁琐的配置,但是我们需要知道这些,在必要时我们可以去做出修改比如我们在初识web ...
webpack最常用的loader：style-loader、css-loader、less-loader、postcss-loader、babel-loader等
style-loader.css-loader less-loader postcss-loader bable-loader style-loader.css-loader 我们在webpack中使 ...
Webpack 常用 loader 和 plugin 汇总
基于 Webpack 4 和 Webpack 5 Loader 名称描述 eslint-loader 代码规范检查.eslint-config-airbnb eslint-config-alloy ...

复习webpack的常用loader

复习webpack的常用loader相关推荐

最新文章

热门文章