Webpack之进阶
进阶
less与sass
npm install --save-dev less less-loader
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
, {
loader: "less-loader" // compiles Less to CSS
}]
}
分离
{
test: /\.less$/,
use: extractTextPlugin.extract({
use: [{
loader: "css-loader"
}, {
loader: "less-loader"
}],
// use style-loader in development
fallback: "style-loader"
})
}
sass与less相同
npm install --save-dev sass-loader node-sass
CSS3前缀处理
postcss
npm install --save-dev postcss-loader autoprefixer
postcss需要单独配置config
postcss.config.js 与 webpack.config.js 同级
module.exports = {
plugins: [
require('autoprefixer')
]
}
配置loader
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader",
options: {
modules: true
}
}, {
loader: "postcss-loader"
}
]
}
分离css
{
test: /\.css$/,
use: extractTextPlugin.extract({
fallback: 'style-loader',
use: [
{ loader: 'css-loader', options: { importLoaders: 1 } },
'postcss-loader'
]
})
}
清除未使用的CSS
npmn i -D purifycss-webpack purify-css
PurifyCSS-webpack要以来于purify-css这个包，所以这两个都需要安装
因为我们需要同步检查html模板，所以我们需要引入node的glob对象使用。在webpack.config.js文件头部引入glob。
const glob = require('glob');
const PurifyCSSPlugin = require("purifycss-webpack");
new PurifyCSSPlugin({
// Give paths to parse for rules. These should be absolute!
paths: glob.sync(path.join(__dirname, 'src/*.html')),
})
支持bable
npm i babel-core babel-loader babel-preset-env babel-preset-stage-0 babel-preset-react -D
{
test:/\.jsx?$/,
use: {
loader: 'babel-loader',
options: {
presets: ["env","stage-0","react"]// env --> es6, stage-0 --> es7, react --> react
}
},
include:path.join(__dirname,'./src'),
exclude:/node_modules/
}
调试
配置devtool
- source-map:在一个单独文件中产生一个完整且功能完全的文件。这个文件具有最好的source map,但是它会减慢打包速度；
- cheap-module-source-map:在一个单独的文件中产生一个不带列映射的map，不带列映射提高了打包速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号）,会对调试造成不便。
- eval-source-map:使用eval打包源文件模块，在同一个文件中生产干净的完整版的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项，在生产阶段则一定要不开启这个选项。
- cheap-module-eval-source-map:这是在打包文件时最快的生产source map的方法，生产的 Source map 会和打包后的JavaScript文件同行显示，没有影射列，和eval-source-map选项具有相似的缺点。
module.exports = {
devtool: 'eval-source-map',
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
}
}
打包第三方库
可以直接在entry中引入
import $ from jquery
利用插件引入
const webpack = require('webpack')
new webpack.ProvidePlugin({
$:"jquery"
})
打包静态文件
npm install copy-webpack-plugin -D
const CopyWebpackPlugin = require('copy-webpack-plugin');
plugins: [
new CopyWebpackPlugin([{
from: path.join(__dirname, 'public'), // 从哪里复制
to: path.join(__dirname, 'dist', 'public') // 复制到哪里
}])
]
打包之前，先清除已打包文件
npm install clean-webpack-plugin -D
const CleanWebpackPlugin = require('clean-webpack-plugin');
plugins: [
new CleanWebpackPlugin([path.join(__dirname, 'dist')])
]
watch
watch: true,
watchOptions: {
ignored: /node_modules/, //忽略不用监听变更的目录
aggregateTimeout: 500, // 文件发生改变后多长时间后再重新编译（Add a delay before rebuilding once the first file changed ）
poll:1000 //每秒询问的文件变更的次数
}
服务器代理
//请求到 /api/users 现在会被代理到请求 http://localhost:9000/api/users。
proxy: {
"/api": "http://localhost:9000",
}
extensions
指定extension之后可以不用在require或是import的时候加文件扩展名,会依次尝试添加扩展名进行匹配
resolve: {
//自动补全后缀，注意第一个必须是空字符串,后缀一定以点开头
extensions: ["",".js",".css",".json"],
},
alias别名
配置别名可以加快webpack查找模块的速度
- 每当引入jquery模块的时候，它会直接引入jqueryPath,而不需要从node_modules文件夹中按模块的查找规则查找
- 不需要webpack去解析jquery.js文件
const bootstrap = path.join(__dirname,'node_modules/bootstrap/dist/css/bootstrap.css');
resolve: {
alias: {
'bootstrap': bootstrap
}
}
多页面
// 多个入口，可以给每个入口添加html模板
entry: {
index: './src/index.js',
main:'./src/main.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[hash].js',
publicPath:PUBLIC_PATH
},
plugins: [
new HtmlWebpackPlugin({
minify: {
removeAttributeQuotes:true
},
hash: true,
template: './src/index.html',
chunks:['index'],
filename:'index.html'
}),
new HtmlWebpackPlugin({
minify: {
removeAttributeQuotes:true
},
hash: true,
chunks:['login'],
template: './src/login.html',
filename:'login.html'
})]
]
