近来一周一向都在折腾webpack,一些项目中经常运用的记录下来，今后免除简朴的设置再去查文档。
通例
1.进口
指导 webpack 应当运用哪一个模块，来作为构建其内部依赖图的最先。
三种写法：
entry: "./app/entry", // string | object | array
entry: ["./app/entry1", "./app/entry2"],
entry: {
a: "./app/entry-a",
b: ["./app/entry-b1", "./app/entry-b2"]
},2.出口
output 属性通知 webpack 在那里输出它所建立的 bundles
output:{
path: path.resolve(__dirname, "dist"), // string,
filename: "bundle.js", // string
filename: "[name].js", // 用于多个进口点(entry point)（出口点？）
filename: "[chunkhash].js", // 用于长效缓存
publicPath: "",
publicPath: "https://cdn.example.com/",
}3. 模块
开辟者将顺序分解成离散功用块(discrete chunks of functionality)，并称之为_模块_。
module:{
rules:[{
test: /\.jsx?$/,
include: [
path.resolve(__dirname, "app")
],
exclude: [
path.resolve(__dirname, "app/demo-files")
],
// 这里是婚配前提，每一个选项都吸收一个正则表达式或字符串
// test 和 include 具有雷同的作用，都是必需婚配选项
// exclude 是必不婚配选项（优先于 test 和 include）
// 最好实践：
// - 只在 test 和 文件名婚配 中运用正则表达式
// - 在 include 和 exclude 中运用绝对路径数组
// - 只管防止 exclude，更倾向于运用 include
issuer: { test, include, exclude },
// issuer 前提（导入源）
enforce: "pre",
enforce: "post",
// 标识运用这些划定规矩，纵然划定规矩掩盖（高等选项）
loader: "babel-loader",
// 应当运用的 loader，它相对上下文剖析
// 为了更清楚，`-loader` 后缀在 webpack 2 中不再是可选的
// 检察 webpack 1 晋级指南。
options: {
presets: ["es2015"]
},
// loader 的可选项
}]
}## 4.插件(plugins)
插件是 webpack 的支柱功用。webpack 本身也是构建于，你在 webpack 设置中用到的雷同的插件体系之上
var webpack = require('webpack');
// 导入非 webpack 自带默许插件
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var DashboardPlugin = require('webpack-dashboard/plugin');
// 在设置中增添插件
plugins: [
// 构建优化插件
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: 'vendor-[hash].min.js',
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_console: false,
}
}),
new ExtractTextPlugin({
filename: 'build.min.css',
allChunks: true,
}),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// 编译时(compile time)插件
//html文件插件
new HtmlWebpackPlugin({
template: 'index.html'
title: 'My App',
filename: 'assets/admin.html',
chunks: ['app'],
excludeChunks: [ 'dev-helper' ]
})
]5 .开辟中 Server(devServer)
devServer: {
//proxy: { // proxy URLs to backend development server
// '/api': 'http://localhost:3000'
// },
contentBase: path.join(__dirname, 'public'), // boolean | string | array, static file location
compress: true, // enable gzip compression
//historyApiFallback: true, // true for index.html upon 404, object for multiple paths
hot: true, // hot module replacement. Depends on HotModuleReplacementPlugin
//https: false, // true for self-signed, object for cert authority
//noInfo: true, // only errors & warns on hot reload
// ...
},
devtool:'none'/'source-map' // 临盆环境
devtool:'eval-source-map'//开辟环境7. externals
//设置
externals: {
jquery: 'jQuery'
}
//代码中运用
import $ from 'jquery';
$('.my-element').animate(...);附录
1. loader 分类列表
加载文件
raw-loader：把文本文件的内容加载到代码中去
file-loader：把文件输出到一个文件夹中，在代码中经由过程相对 URL 去援用输出的文件，
url-loader：和 file-loader 相似，然则能在文件很小的情况下以 base64 的体式格局把文件内容注入到代码中去，在
source-map-loader：加载分外的 Source Map 文件，以轻易断点调试，
svg-inline-loader：把紧缩后的 SVG 内容注入到代码中，
node-loader：加载 Node.js 原生模块 .node 文件。
image-loader：加载而且紧缩图片文件。
json-loader：加载 JSON 文件。
yaml-loader：加载 YAML 文件。
编译模版
handlebars-loader：把 Handlebars 模版编译成函数返回。
markdown-loader：把 Markdown 文件转换成 HTML。
转换脚本言语
babel-loader：把 ES6 转换成 ES5，在3-1运用 ES6 言语中有引见。
ts-loader：把 TypeScript 转换成 JavaScript，在3-2运用 TypeScript 言语中有碰到。
awesome-typescript-loader：把 TypeScript 转换成 JavaScript，机能要比 ts-loader 好。
coffee-loader：把 CoffeeScript 转换成 JavaScript。
转换款式文件
css-loader：加载 CSS，支撑模块化、紧缩、文件导入等特征。
style-loader：把 CSS 代码注入到 JavaScript 中，经由过程 DOM 操纵去加载 CSS。
sass-loader：把 SCSS/SASS 代码转换成 CSS，在3-4运用 SCSS 言语中有引见。
postcss-loader：扩大 CSS 语法，运用下一代 CSS，在3-5运用 PostCSS中有引见。
less-loader：把 Less 代码转换成 CSS 代码。
stylus-loader：把 Stylus 代码转换成 CSS 代码。
搜检代码
eslint-loader：经由过程 ESLint 搜检 JavaScript 代码，在 3-16搜检代码中有引见。
tslint-loader：经由过程 TSLint 搜检 TypeScript 代码。
mocha-loader：加载 Mocha 测试用例代码。
coverjs-loader：盘算测试掩盖率。
别的
vue-loader：加载 Vue.js 单文件组件，在3-7运用 Vue 框架中有引见。
i18n-loader：加载多言语版本，支撑国际化。
ignore-loader：疏忽掉部份文件，在3-11构建同构运用中有引见。
ui-component-loader：按需加载 UI 组件库，例如在运用 antd UI 组件库时，不会由于只用到了 Button 组件而打包进一切的组件。
2.经常运用 Plugins
用于修正行动
context-replacement-plugin：修正 require 语句在寻觅文件时的默许行动。
ignore-plugin：用于疏忽部份文件。
用于优化
extract-text-webpack-plugin：提取 JavaScript 中的 CSS 代码到零丁的文件中
prepack-webpack-plugin：经由过程 Facebook 的 Prepack 优化输出的 JavaScript 代码机能，
uglifyjs-webpack-plugin：经由过程 UglifyES 紧缩 ES6 代码，
webpack-parallel-uglify-plugin：多历程实行 UglifyJS 代码紧缩，提拔构建速率。
imagemin-webpack-plugin：紧缩图片文件。
webpack-spritesmith：用插件制造雪碧图。
ModuleConcatenationPlugin：开启 Webpack Scope Hoisting 功用，
dll-plugin：自创 DDL 的头脑大幅度提拔构建速率，
hot-module-replacement-plugin：开启模块热替代功用。
别的
serviceworker-webpack-plugin：给网页运用增添离线缓存功用，在
stylelint-webpack-plugin：集成 stylelint 到项目中，
i18n-webpack-plugin：给你的网页支撑国际化。
provide-plugin：从环境中供应的全局变量中加载模块，而不必导入对应的文件。
web-webpack-plugin：轻易的为单页运用输出 HTML，比 html-webpack-plugin 好用。
设置汇总
var path = require('path')
var webpack = require('webpack')
//机能分剖析
const WebpackMonitor = require("webpack-monitor");
const HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
mode: ' "production" | "development" | "none"',
entry: {
a: "./app/entry-a",
b: ["./app/entry-b1", "./app/entry-b2"]
},
output: {
path: path.resolve(__dirname, "dist"), // string,
filename: "bundle.js", // string
filename: "[name].js", // 用于多个进口点(entry point)（出口点？）
filename: "[chunkhash].js", // 用于长效缓存
publicPath: "",
publicPath: "https://cdn.example.com/"
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
// 用正则去婚配要用该 loader 转换的 CSS 文件
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: ['style-loader', 'css-loader', 'postcss-loader'],
include: path.join(__dirname, './src'),
exclude: /node_modules/
})
},
{
test: /\.(png|jpg|gif|svg|bmp|eot|woff|woff2|ttf)$/,
loader: {
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
},
{
test: /\.(png|jpg|gif|svg|bmp|eot|woff|woff2|ttf)$/,
loader: {
loader: 'url-loader',
options: {
limit: 5 * 1024, // 图片大小 > limit 运用file-loader, 反之运用url-loader
outputPath: 'images/' // 指定打包后的图片位置
}
}
},
{
// 暴露模块
test: require.resolve('jquery'), // 注重 这里是require的resolve 要领
use: {
loader: 'expose-loader',
options: '$'
}
}
]
},
plugins: [
// 构建优化插件
new webpack.optimize.CommonsChunkPlugin({
name: "vendor",
filename: "vendor-[hash].min.js"
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_console: false
}
}),
//提取css文件
new ExtractTextPlugin({
filename: "build.min.css",
allChunks: true
}),
new WebpackMonitor({
capture: true, // -> default 'true'
target: "../monitor/myStatsStore.json", // default -> '../monitor/stats.json'
launch: true, // -> default 'false'
port: 3030 // default -> 8081
}),
//html文件插件
new HtmlWebpackPlugin({
template: "index.html",
title: "My App",
filename: "assets/admin.html",
chunks: ["app"],
excludeChunks: ["dev-helper"]
})
],
devServer: {
//proxy: { // proxy URLs to backend development server
// '/api': 'http://localhost:3000'
// },
contentBase: path.join(__dirname, "public"), // boolean | string | array, static file location
compress: true, // enable gzip compression
//historyApiFallback: true, // true for index.html upon 404, object for multiple paths
hot: true // hot module replacement. Depends on HotModuleReplacementPlugin
//https: false, // true for self-signed, object for cert authority
//noInfo: true, // only errors & warns on hot reload
// ...
},
devtool: "eval-source-map", //开辟环境
//设置
externals: {
jquery: "jQuery"
}
};其他
设置淘宝npm镜像
$ npm install -g cnpm --registry=https://registry.npm.taobao.orgvm 适配
cnpm i postcss-import postcss-url autoprefixer postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext cssnano postcss-viewport-units cssnano-preset-advanced -D
npm install viewport-units-buggyfill
var hacks = require('viewport-units-buggyfill/viewport-units-buggyfill.hacks');
require('viewport-units-buggyfill').init({
hacks: hacks
});