webpack2详解
1. 项目小工具
-
anywhere
npm i -g anywhere //全局安装anywhere // 使用 1. 在相应的目录下面启动anywhere命令行 -
命令行小技巧
anywhere & //释放当前命令行，生成一个id,一直执行anywhere -
jobs 查看你目前命令行的工作进程
static server.png
webpack处理流程 entry=> rules(loaders)=> webpack=> output
2. entry
//webpack.config.js
// 字符串配置 默认[name] => main
let base = './index.js'
// 对象配置
let base = {
index:'./index.js',
index1:'./index1.js'
};
//webpack2 提供了多种配置方案 函数配置
const dynamic_entry = ()=>base;
//执行new Promise() 返回一个base
const dynamic_entry_promise=()=>{
return new Promise((resolve,reject)=>{
resolve(base)
})
}
module.exports = {
entry:dynamic_entry_promise,
output: {
filename: '_[name].js' //[name] 对应 entry中的key
}
};
3. output
**path: **最好是一个绝对路径
filename:
-
filename:'[chunkhash:3]_[name].js'- [chunkhash] webpack每次编译的时候，认为数据来源是一个chunk(块)，chunkhash就是hash值,指定的hash值是3
-
hashDigestLength: 3 ; filename: '[chunkhash]_[name].js'// hash存在2中情况 1. [hash] 对整个过程有一个hash值 2. [chunkhash] 对每一个文件都有一个hash值 //使用[hash]导出文件 hashDigestLength:2, //hash ==> webpack编译过程 // chunkhash => webpack对每个文件的hash filename: '_[hash][name].js' //导出的整个过程的hash值都一样 _d1index.js _d1index1.js //使用[chunkhash]导出文件 hashDigestLength:2, filename: '_[chunkhash][name].js' // 导出的每一个文件的hash _54index1.js _d2index.js -
library: "MyLibrary"//定义包的名字，导出给别人使用默认情况下：仅仅设置library的话，就会导出一个变量给别人使用，但是一般都会和libraryTarget一起使用，定义相应的包规范。
// 如果在源文件中模块到处内容，可以在引入文件中是用Mylibrary得到导出的值 // 源文件index.js中导出1 module.exports = 1 // index.html中引用导出的文件 可以应用Mylibrary使用相应的导出文件 Mylibrary = 1 -
libraryTarget: 'umd'libraryTarget:'commonjs',libraryTarget:'amd'//定义打包出来后的包兼容 common.js amd windows等// umd (function webpackUniversalModuleDefinition(root, factory) { if(typeof exports === 'object' && typeof module === 'object') module.exports = factory(); //兼容了common.js else if(typeof define === 'function' && define.amd) define([], factory); //兼容了amd else if(typeof exports === 'object') exports["MyLibrary"] = factory(); else root["MyLibrary"] = factory(); //兼容了全局变量window }) // common.js exports["MyLibrary"] = ..... // amd define("MyLibrary", [], function() { return /******/ (function(modules) {...... chunkFilename用于异步加载模块chunkFilename:'[chunkhash].js',chunkFilename:'[chunkhash]_[name].js'chunkname的运用 导出文件的文件名-
publicPath 一般用于异步加载 指定异步加载的文件导出后的路径 和静态服务器的启动路径关联
//异步加载 // require.ensure用于异步加载，webpack1和webpack2官网提到。require.ensure会创建一个chunk，且可以指定该chunk的名称 // 很像amd的规范（amd本身就是用于异步加载） // 三个参数 1.dependencies需要的依赖 2. require()函数，异步加载的内容)(callback函数) 3. 模块名，用于构建时生成文件时命名使用(chunkname) require.ensure([],(require)=>{ require('./index1.js') },'dynamic') //导出异步加载的文件名 chunkFilename:'[chunkhash].js', // 查看导出的文件后，简单分析下导出后的代码一部分 __webpack_require__.e = function requireEnsure(chunkId) { /******/ // start chunk loading /******/ var head = document.getElementsByTagName('head')[0]; /******/ var script = document.createElement('script'); /******/ script.type = 'text/javascript'; /******/ script.charset = 'utf-8'; /******/ script.async = true; /******/ script.timeout = 120000; /******/ /******/ script.src = __webpack_require__.p + "" + {"0":"93"}[chunkId] + ".js"; /******/ head.appendChild(script); // 相当于创建一个script的异步加载相应的文件名，赋予了相应的参数 // <script type="text/javascript" charset="utf-8" async="" src="/output/xxxdist/93.js"></script> // 设置了publicPath publicPath: "/output/xxxdist/", // server-relative __webpack_require__.p 到底是一个什么东东，看看导出文件 /******/ // __webpack_public_path__ /******/ __webpack_require__.p = "/output/xxxdist/";反思：
-
如果我改变publicPath设置成一个别的路径会不会报错
publicPath: "/asset/"// 导出的src的寻找路径是/asset/下面的对应的文件名 /******/ // __webpack_public_path__ /******/ __webpack_require__.p = "/asset/"; /******/ script.src = __webpack_require__.p + "" + {"0":"93"}[chunkId] + "_" + ({"0":"dynamic"}[chunkId]||chunkId) + ".js";
-
publicPath.png
4. module
module.rules: 定义使用的模块规则，是一个数组，包含一个对象，定义了一些要编译的内容和使用的loader。如果满足test的部分就使用use
use：是一个数组，里面是各个需要使用的loader对象
module:{
rules:[
{
test: /\.jsx?$/, //定义使用loader的类型
exclude: [
'node_modules' // 除去的模块名
],
// use是一个数组，里面是各个对象，使用不同的loader
use:[{
loader: "babel-loader", //要使用的loader
}]
},
]
}
5. resolve
resolve.alias: 别名，值是一个对象，里面是一个key和value，对应相应的名字和路径
// webpack.config.js
resolve:{
alias:{
test: path.resolve(__dirname,'test/test/test.js')
}
}
//在文件中使用require 引入相应的模块名
// index.js
require('test') //相当于引用绝对路径的__dirname+'test/test/test.js'
6. devtool 开发工具
让我们在源文件中使用debugger，查看源文件
devtool:'source-map',
7. loaders 对每一个文件进行预处理
对于css部分使用loader的时候需要进行预处理，然后实现相应的代码的引用，通常css,scss,less都是要通过plugins进行配置和搭配
options：对引用进行个性化的设置
plugins:[
new ExtractTextPlugin({
filename: "[name].css",
disable: false,
allChunks: true
})
],
module:{
//entry => loaders ==> webpack ==> output
rules:[
{
test: /\.js[x]?$/,
exclude: /node_modules/,
use: {
loader:'babel-loader'
}
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use:{
loader:'css-loader',
options: {
sourceMap: true
}
}
})
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback:'style-loader',
use:['css-loader',{
loader:'less-loader',
options: {
sourceMap: true
}
}]
})
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback:'style-loader',
use:['css-loader',{
loader:'sass-loader',
options: {
sourceMap: true
}
}]
})
},
{
test: /\.(png|jpg|jpeg|gif|woff|woff2|ttf|eot|svg|swf)$/,
use: {
loader:'file-loader',
options:{
name:'[name]_[sha512:hash:base64:7].[ext]'
}
}
},
{
test: /\.html/,
use:{
loader:"html-loader",
options:{
minimize: false,
attrs:false
}
}
}
]
}
};
8. plugins webpack插件的使用
webpack有一个相应的编译过程
webpack lifecycle before-complitaion run done => 预处理 运行 运行完成
// 全局引用jquery webpack run 阶段使用
new webpack.ProvidePlugin({
$: 'jquery'
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
minChunks: Infinity
})
