复习webpack的常用loader
今天复习了下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的更多相关文章
- webpack配置常用loader加载器
webapck中使用loader的方法有三种 使用loader之前必须运行安装 : npm install --save-dev xxx-loader (1)通过CLI : 命令行中运行 webpac ...
- webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server
一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...
- webpack系列之loader的基本使用
可以访问 这里 查看更多关于大数据平台建设的原创文章. webpack系列之loader及简单的使用 一. loader有什么用 webpack本身只能打包Javascript文件,对于其他资源例如 ...
- vue第二单元(webpack的配置-学习webpack的常用配置)
第二单元(webpack的配置-学习webpack的常用配置) #课程目标 掌握webpack的常用配置 掌握如何根据实际的需求修改webpack的对应配置 了解webpack-dev-server的 ...
- 初探webpack之编写loader
初探webpack之编写loader loader加载器是webpack的核心之一,其用于将不同类型的文件转换为webpack可识别的模块,即用于把模块原内容按照需求转换成新内容,用以加载非js模块, ...
- webpack CSS处理loader
loader概念: 首先来介绍一下loader,之前我们用webpack来处理我们写的js代码,并且webpack会自动处理js之间相关的依赖.但是,在开发中我们不仅仅有基本的js代码处理,我们也需要 ...
- webpack打包教程(一)常用loader详解
1.打包图片 // { // test: /\.(png|jpe?g|gif)$/i, // use: [{ // loader: 'file-loader', // options: { // na ...
- webpack常用loader和plugin及打包速度优化
优化 或 也可以用: 备用: 慎用的配置,用的不好会增加打包时间: 代码丑化插件:
- Webpack学习-Loader
什么是Loader? 继上两篇文章webpack工作原理介绍(上篇.下篇),我们了解到Loader:模块转换器,也就是将模块的内容按照需求装换成新内容,而且每个Loader的职责都是单一,只会完成一种 ...
随机推荐
- 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 ...
- 通过注册表查询 .Net Framework 的版本
HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\NET Framework Setup\NDP\v4\Full 注意:即使卸载 .Net Framework 这些注册表依然 ...
- [Windows] DiskPart commands
https://docs.microsoft.com/en-us/windows-server/administration/windows-commands/diskpart
- opencv-8-图像核与蒙板操作
opencv-8-图像核与蒙板操作 opencvc++qt 开始之前 在准备开始的时候, 我大概列了一个opencv 章节列表, 按照章节进行写, 写到某些部分的时候再具体调整章节内容, 完成了之后, ...
- 使用ExecutorService来停止线程服务
文章目录 使用shutdown 使用shutdownNow 使用ExecutorService来停止线程服务 之前的文章中我们提到了ExecutorService可以使用shutdown和shutdo ...
- java并发中CountDownLatch的使用
文章目录 主线程等待子线程全都结束之后再开始运行 等待所有线程都准备好再一起执行 停止CountdownLatch的await java并发中CountDownLatch的使用 在java并发中,控制 ...
- Linux 查看进程资源--ps、top命令
1,ps命令 ps能够给出当前系统中进程的快照.它能捕获系统在某一事件的进程状态 命令参数: a 显示所有进 ...
- nodejs操作MySQL,mysql连接池及事务的使用
https://blog.csdn.net/jasnet_u/article/details/88605168
- pomelo安装笔记
npm install -dnpm config set registry https://registry.npm.taobao.orgnpm install pomelo -gpomelo lis ...
- Codeforces Round #561 (Div. 2) A. Silent Classroom(贪心)
A. Silent Classroom time limit per test1 second memory limit per test256 megabytes inputstandard inp ...