样式文件的处理
css-loader
分析css文件的依赖关系,合并css(支持@import url())
style-loader
将css插入HTML中
{
test:/\.scss$/,
use:["style-loader",{
loader:"css-loader",
options: {
importLoaders: 2,
},
},"postcss-loader","sass-loader"]//注意顺讯
}
名称 | 默认值 | 描述 |
---|---|---|
modules | false | 启用/禁用 CSS 模块 |
importLoaders | 0 | 前应用的 loader 的数量(在css-loader之前还要运行多少loader) |
sass-loader
没什么好说的 处理sass文件
less-loader
处理sass文件
postcss-loader
使用autoprefixer增加厂商前缀在这里插入代码片
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader", "postcss-loader"]
}
]
}
}
And create a postcss.config.js with:
module.exports = {
plugins: [
require('autoprefixer')
]
}
浏览器列表配置一下( 保证能显示前缀)
"browserslist": [
"iOS >= 6",
"Android >= 4",
"IE >= 9"
],
配置ES6
npm install --save-dev babel-loader @babel/core
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
]
}
npm install @babel/preset-env --save-dev
{
"presets": ["@babel/preset-env"]
}
babel-loader 负责解析规则
babel-core 核心库
babel/preset-env 翻译ES6
polyfill 可以使用新的内置函数,如Promise或WeakMap,静态方法如Array.from或Object.assign
在js中直接引入
import "@babel/polyfill";
会造成打包体积过大
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage"
}
]
]
}
使用useBuiltIns可以节省打包体积(不用再在js中引入@babel/polyfill)(应该会造成全局污染)
npm install --save-dev @babel/plugin-transform-runtime
{
"plugins": ["@babel/plugin-transform-runtime"]
}
默认配置
{
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"absoluteRuntime": false,
"corejs": false,
"helpers": true,
"regenerator": true,
"useESModules": false,
"version": "7.0.0-beta.0"
}
]
]
}
corejs 选项 选项 | 安装命令 |
---|---|
false | npm install --save @babel/runtime |
2 | npm install --save @babel/runtime-corejs2 |
3 | npm install --save @babel/runtime-corejs3 |
corejs: 2仅支持全局变量(例如Promise)和静态属性(例如Array.from),corejs: 3还支持实例属性(例如[].includes)
插件
插件就是在webpack的指定时间去做只能定的操作,类似于生命周期
html-webpck-plugin(生成html文件,自动引入js)
通常使用的参数 template
plugins:[
new HtmlWebpackPlugin({
template:"./src/index.html"
})
]
clean-webpack-plugin
Entry Output
配置多入口
{
entry: {
app: './src/app.js',
search: './src/search.js'
},
output: {
filename: '[name].js',
path: __dirname + '/dist'
}
}
配置cdn
output: {
path: "/home/proj/cdn/assets/[hash]",
publicPath: "http://cdn.example.com"
}
sourcemap
映射打包过后的文件和源文件
iniline 不生成sourcemap
cheap 只关注业务代码和行
module 关注第三方包,loaders
开发:
cheap-module-eval-source-map
生产
cheap-moudle-source-map
开发相关
使用观察模式
"scripts": {
"watch": "webpack --watch",
"build": "webpack"
},
运行npm run watch
不要使用cleanwebpackplugin
使用webpack-dev-server
安装
cnpm install --save-dev webpack-dev-server
配置webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
devtool: 'inline-source-map',
+ devServer: {
+ contentBase: './dist'
+ },
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Development'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
添加 package.json
{
"name": "development",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch",
+ "start": "webpack-dev-server --open",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^0.1.16",
"css-loader": "^0.28.4",
"csv-loader": "^2.1.1",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^2.29.0",
"style-loader": "^0.18.2",
"webpack": "^3.0.0",
"xml-loader": "^1.2.1"
}
}
HMR
允许运行时更新各个模块,而是全局刷新
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin")
const {CleanWebpackPlugin} = require("clean-webpack-plugin")
+ const webpack = require("webpack")
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].js",
},
mode: "development",
devServer:{
contentBase:'./dist',
+ hot:true,
// hotOnly:true
},
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: [
{
loader: "url-loader",
options: {
limit: 200,
name: "img/[name]_[hash:5].[ext]",
},
},
],
},
{
test: /\.css$/,
use: ["style-loader", {
loader: "css-loader", // 将 CSS 转化成 CommonJS 模块
// options:{
// importLoaders:1
// }
options: {
importLoaders: 1 // 0 => 无 loader(默认); 1 => postcss-loader; 2 => postcss-loader, sass-loader
}
},"postcss-loader"],
},
{
test: /\.scss$/,
use: [{
loader: "style-loader" // 将 JS 字符串生成为 style 节点
}, {
loader: "css-loader", // 将 CSS 转化成 CommonJS 模块
options: {
importLoaders: 2 // 0 => 无 loader(默认); 1 => postcss-loader; 2 => postcss-loader, sass-loader
}
}, {
loader: "sass-loader" // 将 Sass 编译成 CSS
},"postcss-loader"]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: {
loader: "file-loader",
options: {
name: "font/[name].[ext]",
}
},
},
],
},
plugins:[
new HtmlWebpackPlugin({
template:"./src/index.html"
}),
+ new webpack.HotModuleReplacementPlugin()
// new CleanWebpackPlugin()
]
};
js 中需要额外处理(css-loader,vue-loader帮助我们底层实现)
if(module.hot){
module.hot.accept("./aside.js",()=>{//如果启用HMR,当./aside.js发生变化
document.getElementById("app").removeChild(document.getElementById("btn"))
console.log(123)
new Aside()
})
}