今天复习了下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. PHP使用token防止表单重复提交的方法

    本文实例讲述了PHP使用token防止表单重复提交的方法.分享给大家供大家参考,具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 2 ...

  2. 通过注册表查询 .Net Framework 的版本

    HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\NET Framework Setup\NDP\v4\Full 注意:即使卸载 .Net Framework 这些注册表依然 ...

  3. [Windows] DiskPart commands

    https://docs.microsoft.com/en-us/windows-server/administration/windows-commands/diskpart

  4. opencv-8-图像核与蒙板操作

    opencv-8-图像核与蒙板操作 opencvc++qt 开始之前 在准备开始的时候, 我大概列了一个opencv 章节列表, 按照章节进行写, 写到某些部分的时候再具体调整章节内容, 完成了之后, ...

  5. 使用ExecutorService来停止线程服务

    文章目录 使用shutdown 使用shutdownNow 使用ExecutorService来停止线程服务 之前的文章中我们提到了ExecutorService可以使用shutdown和shutdo ...

  6. java并发中CountDownLatch的使用

    文章目录 主线程等待子线程全都结束之后再开始运行 等待所有线程都准备好再一起执行 停止CountdownLatch的await java并发中CountDownLatch的使用 在java并发中,控制 ...

  7. Linux 查看进程资源--ps、top命令

    1,ps命令 ps能够给出当前系统中进程的快照.它能捕获系统在某一事件的进程状态 命令参数:          a                                      显示所有进 ...

  8. nodejs操作MySQL,mysql连接池及事务的使用

    https://blog.csdn.net/jasnet_u/article/details/88605168

  9. pomelo安装笔记

    npm install -dnpm config set registry https://registry.npm.taobao.orgnpm install pomelo -gpomelo lis ...

  10. Codeforces Round #561 (Div. 2) A. Silent Classroom(贪心)

    A. Silent Classroom time limit per test1 second memory limit per test256 megabytes inputstandard inp ...