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

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

1.

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

2.在config.js中配置:

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

3.配置babel的preset:

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

4.项目目录下创建.babelrc文件,内容为:

 {
"presets": ["env"]
}

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的时候直接调用就好了:

 module.exports = {
plugins: [
require('autoprefixer')
]
}

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

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');
const path=require('path');
module.exports={
entry:['babel-polyfill','./src/js/a.js'],
output:{
path:path.resolve(__dirname,'dist'),
filename:'[name].js',
publicPath:'/assets/'
},
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }, {test:/\.css$/,use:['style-loader','css-loader','postcss-loader']}, {test:/\.scss$/,
use:['style-loader',
{loader:'css-loader',options:{importLoaders:2}},
'postcss-loader','sass-loader']
},
//url
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name:'[name].[ext]'
}
}
]
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: 'img/[name].[ext]'
}
}
]
},
45 {
46 test: /\.(htm|html)$/,
47 loader: 'html-withimg-loader'
48 } ]
},
52 plugins:[
53 new HtmlWebpackPlugin({
54 template: 'html-withimg-loader!' + path.resolve(__dirname, 'index.html'),
55 filename: 'main.html'
56 })
57 ],
devServer: {
    contentBase:__dirname, //浏览器cwd
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
  } }

复习webpack的常用loader的更多相关文章

  1. webpack配置常用loader加载器

    webapck中使用loader的方法有三种 使用loader之前必须运行安装 : npm install --save-dev xxx-loader (1)通过CLI : 命令行中运行 webpac ...

  2. webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server

    一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...

  3. webpack系列之loader的基本使用

    可以访问 这里 查看更多关于大数据平台建设的原创文章. webpack系列之loader及简单的使用 一. loader有什么用 webpack本身只能打包Javascript文件,对于其他资源例如  ...

  4. vue第二单元(webpack的配置-学习webpack的常用配置)

    第二单元(webpack的配置-学习webpack的常用配置) #课程目标 掌握webpack的常用配置 掌握如何根据实际的需求修改webpack的对应配置 了解webpack-dev-server的 ...

  5. 初探webpack之编写loader

    初探webpack之编写loader loader加载器是webpack的核心之一,其用于将不同类型的文件转换为webpack可识别的模块,即用于把模块原内容按照需求转换成新内容,用以加载非js模块, ...

  6. webpack CSS处理loader

    loader概念: 首先来介绍一下loader,之前我们用webpack来处理我们写的js代码,并且webpack会自动处理js之间相关的依赖.但是,在开发中我们不仅仅有基本的js代码处理,我们也需要 ...

  7. webpack打包教程(一)常用loader详解

    1.打包图片 // { // test: /\.(png|jpe?g|gif)$/i, // use: [{ // loader: 'file-loader', // options: { // na ...

  8. webpack常用loader和plugin及打包速度优化

    优化 或 也可以用: 备用: 慎用的配置,用的不好会增加打包时间: 代码丑化插件:

  9. Webpack学习-Loader

    什么是Loader? 继上两篇文章webpack工作原理介绍(上篇.下篇),我们了解到Loader:模块转换器,也就是将模块的内容按照需求装换成新内容,而且每个Loader的职责都是单一,只会完成一种 ...

随机推荐

  1. 5、flink常见函数使用及自定义转换函数

    代码地址:https://gitee.com/nltxwz_xxd/abc_bigdata 一.flink编程方法 获取执行环境(execution environment) 加载/创建初始数据集 对 ...

  2. java中CompletionService的使用

    java中CompletionService的使用 之前的文章中我们讲到了ExecutorService,通过ExecutorService我们可以提交一个个的task,并且返回Future,然后通过 ...

  3. HDU 5954 Do Not Pour Out

    #include<bits/stdc++.h> using namespace std; #define rep(i,a,b) for(int i=a;i<=b;++i) #defi ...

  4. VR全景视图 Google VrPanoramaView

    2019独角兽企业重金招聘Python工程师标准>>> 一.背景简介 Welcome to VR at Google 进入Google VR主页,发现官方给我们提供了两套解决观看VR ...

  5. 《Android游戏开发详解》一1.7 控制流程第1部分——if和else语句

    本节书摘来异步社区<Android游戏开发详解>一书中的第1章,第1.7节,译者: 李强 责编: 陈冀康,更多章节内容可以访问云栖社区"异步社区"公众号查看. 1.7 ...

  6. 是时候实现 SOC 2.0 了

    本文讲的是是时候实现 SOC 2.0 了,SOC,安全运营中心,为取得其最佳效果,以及真正最小化网络风险,需要全员就位,让安全成为每个人的责任. 早在几年前,企业就开始创建SOC来集中化威胁与漏洞的监 ...

  7. P2024 食物链(种类并查集)

    P2024 [NOI2001]食物链 题目描述 动物王国中有三类动物 A,B,C,这三类动物的食物链构成了有趣的环形.A 吃 B,B吃 C,C 吃 A. 现有 N 个动物,以 1 - N 编号.每个动 ...

  8. 搜索+简单dp

    前言:即使是简单的递归,在复杂度过高时也可以使用简单的dp. 一般有两种情况,一是利用dp思想求最优子结构进行搜索剪枝,二是利用搜索进行dp数组的填充. 例题一.hdu1978 题目大意:这是一个简单 ...

  9. inode block 软硬链接

    inode block 软硬链接 1 inode 1.1 inode(索引节点)作用 (1)用于存储文件数据属性信息(2)用于存储数据指针信息 1.2 如何产生 格式化时,创建文件系统 1.3 如何查 ...

  10. spring mvc 中使用session

    举例:用户登录成功之后,把用户对象放置到session中 第一步,用户登录成功之后把用户对象首先放到Model中 第二步,要在控制器上加SessionAttributes注解,把放到model中的对象 ...