babel-loader
es6编译
编译ES6语法
- 安装babel-loader、@babel/core、@babel/preset-env
npm install babel-loader @babel/core @babel/preset-env --save--dev
- 编写loader配置文件（webpack.config.js）
const webpack = require("webpack");
module.exports = {
// entry:'./index.js',
// entery:['index.js','index2.js']
entry:{
index: './src/index.js'
},
output:{
path:__dirname+'/mybundle',
filename:'./js/[name].[hash:5][id].js'
},
module:{
rules:[{
test:/\.js$/,//识别文件后缀
use:{
loader:'babel-loader',
options:{
presets:[
['@babel/preset-env',{
targets:{
browsers:['>1%','last 2 versions']//兼容大于市面占有大于百分之一的浏览器、兼容最新的两个版本浏览器。
//node:'10' node10 为目标
//chrome:'56' chrome 56版本为目标
}
}]
]
}
}
}]
},
}
- webpack 开始打包
webpack
编译ES6方法
全局编译
利用es5的写法，重写es6的方法，并把方法赋值到全局环境，生成全局变量。适用于项目开发，打包后文件体积较大
- 安装babel-polyfill（全局添加ES6方法）
npm install babel-polyfill --save--dev
- 编写loader配置文件（webpack.config.js）
module.exports = {
entry:{
index: ['babel-polyfill','./src/index.js']
},
output:{
path:__dirname+'/mybundle',
filename:'./js/[name].[hash:5][id].js'
},
module:{
rules:[{
test:/\.js$/,
// use:'babel-loader'
use:{
loader:'babel-loader',
options:{
presets:[['@babel/preset-env',{
targets:{
browsers:['>1%','last 2 versions']
}
}]],
}
}
}]
}
}
- webpack 打包
webpack
按需编译
利用es5的写法，按需重写es6的方法，并把方法赋值到局部环境，生成局部变量。适用于框架开发，打包后文件体积较小
- 安装@babel/plugin-transform-runtime、@babel/runtime（局部添加ES6方法）
npm install @babel/plugin-transform-runtime、@babel/runtime --save--dev
- 编写loader配置文件（webpack.config.js）
module.exports = {
entry:{
index: ['./src/index.js']
},
output:{
path:__dirname+'/mybundle',
filename:'./js/[name].[hash:5][id].js'
},
module:{
rules:[{
test:/\.js$/,
// use:'babel-loader'
use:{
loader:'babel-loader',
options:{
presets:[['@babel/preset-env',{
targets:{
browsers:['>1%','last 2 versions']
}
}]],
plugins:[
['@babel/transform-runtime']
]
}
}
}]
}
}
- webpack 打包
webpack
babel-loader 的配置文件，可以独立出来
生成一个".babelrc"的文件，把option的value迁移过去
- babelrc文件
{
"presets":[
['@babel/preset-env',{
"targets":{
"browsers":['>1%','last 2 versions']
}
}]
]
}
- webpack.config.js
module.exports = {
// entry:'./index.js',
// entery:['index.js','index2.js']
entry:{
index: './src/index.js'
},
output:{
path:__dirname+'/mybundle',
filename:'./js/[name].[hash:5][id].js'
},
module:{
rules:[{
test:/\.js$/,
// use:'babel-loader'
use:{
loader:'babel-loader',
// options:{
// presets:[['@babel/preset-env',{
// targets:{
// browsers:['>1%','last 2 versions']
// }
// }]]
// }
}
}]
},
}
语法糖编译
编译Typescript
- 安装typescript、ts-loader
npm install typescript ts-loader --save--dev
- 编写loader配置文件（webpack.config.js）
module.exports = {
// entry:'./index.js',
// entery:['index.js','index2.js']
entry:{
index: './src/index.js'
},
output:{
path:__dirname+'/mybundle',
filename:'./js/[name].[hash:5][id].js'
},
module:{
rules:[{
test:/\.js$/,
// use:'babel-loader'
use:{
loader:'babel-loader',
options:{
presets:[['@babel/preset-env',{
targets:{
browsers:['>1%','last 2 versions']
}
}]]
}
}
},{
test:/\.tsx?$/,
use:{
loader:'ts-loader',
}
}]
}
}
- 编写tsconfig.json 文件（ts 的配置文件）
{
"compileOptions": {
"module":"common.js",//模块化方式
"target":"es5",//编译语法目标
},
"exclude":["./node_modules"]//排除不处理的文件夹
}
- webpack 打包
webpack
css-loader、style-loader
简介
css可以通过js文件被引入，但必须使用相应的loader
- css-loader，让css可以被js正确引入
- style-loader，让css被引入后可以被正确的以一个style标签插入页面
- 两者顺序很重要，要先经过css-loader处理，再由style-loader处理
使用
- 安装style-loader、css-loader
npm install style-loader css-loader --save--dev
- 在js中引入css
import "./index.css"
import "./index2.css"
function component() {
console.log('index1')
}
component()
- 编写loader配置文件（webpack.config.js）
- style-loader
webpack.config.js
{
test:/\.css$/,
use:[{
loader:'style-loader',
options:{
insert:'top',//相对于头部的top，buttom：相对于头部的buttom
injectType:'singletonStyleTag',////多个css文件的时候，是否合成一个style节点
}
},{
loader:'css-loader'
}]
}
- css-loader
{
loader:'css-loader',
options:{
modules:true,//启用/禁用CSS模块及其配置
//modules:{
//localIdentName:'[path][name]_[local]_[hash:4]'//名字格式
//},
}
}
index2.css
.bc{
width: 100px;
background-color: yellow;
}
:global .border-white{/*全局*/
border:4px solid white;
}
:local .border-green{/*局布*/
border: 3px solid #00ff00;
}
:local .div1{/*局布*/
width: 50px;
height: 50px;
background-color: pink;
composes: border-yellow from './index.css';
}
index.css
body{
background-color: brown;
}
.border-yellow{
border: 4px solid yellow;
}
index.js
import test1 from "./index.css";
import test2 from "./index2.css";
document.getElementById("mydiy").setAttribute('class',test1.div1) //因为local修饰的css类名，会把css修饰为hash值。
关于css-loader 请看css-loader
- webpack 打包
webpack
less-loader、sass-loader
简介
- less，sass是css预处理语言，用来帮助我们更方便的写css。更方便团队合作
- less，sass浏览器是无法直接识别的，需要编译成css才能被识别。所以我们用less，sass写的文件都要编译。
使用
- 安装less、less-loader sass-loader、node-sass
npm install less less-loader --save--dev
npm install sass-loader node-sass --save--dev
- 编写loader配置文件（webpack.config.js）
{
loader:'less-loader'
}
- webpack打包
webpack
注意：这里要注释loader的顺序，是一个由下到上的顺序，所以我们是一个逆序，从下到上分别是less-loader、css-loader、style-loader
extract-text-webpack-plugin
简介
webpack本来只能能打包处理.js文件，但是通过强大的loader之后，可以打包处理各种类型的文件。比如：.css文件等。
表面上webpack通过loader可以打包各种文件了，已经完美了。但是在某些场景中也存在着问题的，比如我们的css的内容都被打包到bundle.js里面了。在生产环境中我们通常会利用浏览器的缓存来提高用户体验，用上了webpack的hash（正常js文件hash类型会使用chunkhash）。
那么问题来了：
我只要修改了js部分的代码，那么我的css模块也会被重新打包，被当成css模块也有内容修改。
或者只修改了css模块，js模块是没有变化的，但是他们都是在一个bundle中，所以都会被认为都有修改。
解决方案：
思路：将css模块和js模块分开打包，换句话说把css代码从js文件中抽离出来，单独出一个模块。
使用
- 安装extract-text-webpack-plugin
npm install extract-text-webpack-plugin@next webpack --save--dev //webpack4
npm install extract-text-webpack-plugi webpack --save--dev //webpack3
- 编写loader配置文件（webpack.config.js）
var extractTextCss = require('extract-text-webpack-plugin');
{
test:/\.css$/,
use:extractTextCss.extract({
fallback:{
loader:'style-loader',
options:{
singleton:true
}
}
use:[
{
loader:'css-loader',
options:{
modules:true,//启用/禁用CSS模块及其配置
modules:{
localIdentName:'[path][name]_[local]_[hash:4]'//名字格式
},
}
}
]
})
}
plugins:[new extractTextCss({
filename:'[name].min.css' //打包后css的位置和名字
})]
- webpack打包
webpack
- 用link标签引入css
<link rel="stylesheet" href="./mybundle/index.min.css">
postcss-loader
简介
postcss-loader 应该是 Webpack 配置中不可或缺的一个 CSS loader。它负责进一步处理 CSS 文件，比如添加浏览器前缀，压缩 CSS 等。
配置 postcss-loader 时，可以在 webpack.config.js 中配置具体选项，也可以新建一个 postcss.config.js，专门定义 postcss-loader 的配置。
使用
- 安装 postcss、postcss-loader、autoprefixer、 postcss-cssnext
npm install postcss postcss-loader autoprefixer postcss-cssnext --save--dev
- 编写loader配置文件（webpack.config.js）
{
loader:"postcss-loader"
options:{
ident:'postcss',//plugins的给谁使用
plugins:[
require('autoprefixer')({
'overrrideBrowserslist':[">1%","last 2 versons"]
require('postcss-cssnext')//需要使用cssnext语法的时候加上
})//自动添加前缀 -mom
]
}
}//写在css-loader和less-loader中
这里的'overrrideBrowserslist':[">1%","last 2 versions"]配置还能写在package.json,这里会应用到全局避免重复填写
"browserslist":[
">1%","last 2 versions"
]
也可以添加一个.browserslistrc文件
- webpack打包
webpack
html-webpack-plugin
简介
为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题
可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口
github上有些关于htmlwebpackplugin的属性介绍
使用
- 安装 html-webpack-plugin
npm install html-webpack-plugin --save--dev
- 配置webpack
var htmlWebpackPlugin = require('html-webpack-plugin')
plugin: [new htmlWebpackPlugin({
filename:'index.html',
template:'./index.html',
minify:{
collapseWhitespace:true//是否压缩
},
inject:true,//自动添加js和css
chunks:['app1','app2'],//判断需要引入哪些入口文件
})]
3.webpack打包
webpack
总结
以上仅仅是个人的学习到的一些基本用法，可能在详细的loader用法，还需要查看npm文档。请各位大神指导指导
