本文github仓库:https://github.com/Rynxiao/webpack2-learn
从v1迁移到v2
1. 配置类型
在webpack1的时候，主要是通过导出单个object来进行配置。例如下面的配置：
// webpack1 导出方式module.export = {
entry : 'app.js',
output : { */... */},
/* ... */};而在webpack2中，则有三种方式来灵活配置，可以针对不同的场景。
1.1 通过不同环境变量导出不同的配置文件
// 可以有两种方式传递当前值，一种是简单传递字符串，另外一种则是传递一个对象// 例如： webpack --env production 控制台打印的就是 'production'，是一个字符串// 而当这样调用时：webpack --env.production --env.size 60，控制台打印的就是 { production : true, size : 60 }var path = require('path'),
webpack = require('webpack'),
UglifyJsPlugin = new webpack.optimize.UglifyJsPlugin(),
plugins = [];module.exports = function(env) {
console.log(env);
if (env === 'production') {
plugins.push(UglifyJsPlugin);
}
return {
entry : path.resolve(__dirname, 'js/app.js'),
output : {
path : path.resolve(__dirname, 'build'),
filename : '[name].bundle.js'
},
module : {
rules : [ {
test : /\.js|\.jsx$/,
loader : 'babel-loader',
options : {
presets : ["es2015", "react"] }
},
{
test : /\.css$/,
use : ['style-loader', 'css-loader'] },
{
test : /\.less$/,
use : ['style-loader', 'css-loader', 'less-loader'] }
] },
plugins : plugins };}// 在package.json中配置两个命令{
"dev" : "webpack",
"build" : "webpack --env production"}具体的生产环境构建方式可以参看官网production
1.2 通过promise方式导出配置文件
这种方式的应用场景是在某些情况下，我们暂时拿不到配置文件所需要的配置参数，比如需要配置的文件名等等，或许这是一个异步的操作，通过promise方式可以使我们在异步操作之后得到配置变量，然后再执行配置文件。
// 在这种情况下，1秒之后会返回配置文件并且执行var path = require('path');module.exports = () => {
return new Promise((resolve, reject) => {
console.log('loading configuration ...');
setTimeout(() => {
console.log('loading completed!');
resolve({
entry : path.resolve(__dirname, 'js/app.js'),
output : {
path : path.resolve(__dirname, 'build'),
filename : '[name].bundle.js'
},
module : {
rules : [ {
test : /\.js|\.jsx$/,
loader : 'babel-loader',
options : {
presets : ["es2015", "react"] }
},
{
test : /\.css$/,
use : ['style-loader', 'css-loader'] },
{
test : /\.less$/,
use : ['style-loader', 'css-loader', 'less-loader'] }
] },
});
}, 1000);
});}1.3 同时打包多份配置文件
webpack1时只能导出单份配置文件，在webpack2中可以同时打包多份配置文件，意味着可以为多个入口文件打包，在多页面打包的时候，就再也不需要为在每一个单独的页面执行打包命令了。
// config-amd.jsvar path = require('path');module.exports = {
entry : path.resolve(__dirname, 'js/app.js'),
output : {
path : path.resolve(__dirname, 'build'),
filename : '[name].amd.js',
libraryTarget : 'amd'
},
module : {
rules : [ {
test : /\.js|\.jsx$/,
loader : 'babel-loader',
options : {
presets : ["es2015", "react"] }
},
{
test : /\.css$/,
use : ['style-loader', 'css-loader'] },
{
test : /\.less$/,
use : ['style-loader', 'css-loader', 'less-loader'] }
] }};// config-commonjs.jsvar path = require('path');module.exports = {
entry : path.resolve(__dirname, 'js/app.js'),
output : {
path : path.resolve(__dirname, 'build'),
filename : '[name].commonjs.js',
libraryTarget : 'commonjs'
},
module : {
rules : [ {
test : /\.js|\.jsx$/,
loader : 'babel-loader',
options : {
presets : ["es2015", "react"] }
},
{
test : /\.css$/,
use : ['style-loader', 'css-loader'] },
{
test : /\.less$/,
use : ['style-loader', 'css-loader', 'less-loader'] }
] }};// webpack.config.jsvar configAmd = require('./config-amd.js'),
configCommonjs = require('./config-commonjs.js');module.exports = [
configAmd,
configCommonjs
]2. resolve相关
2.1 extensions 后缀扩展
在webpack2中，不需要默认写一个空字符串，如果没有配置这个选项，则默认的后缀名是['.js', '.json']，这样可以在需要用到import 'some.js'的时候直接写import 'some'就好。
如果不想开启自动后缀，则需要在resolve中配置enforceExtension : true，例如：
var path = require('path');module.exports = {
entry : // ....,
// ...
resolve : {
enforceExtension : true
}};此时，如果在js/app.js中引用js/text.js，就会报错
// Errorimport './text';// Rightimport './text.js';
2.2 root/fallback/modulesDirectories 文件定位
在webapck1 resolve中配置这三个属性，是告诉webpack在引入模块的时候必须要寻找的文件夹，webpack2中则直接更换成了一个单独的属性modules，默认优先搜索node_modules(注意，这是一个相对位置)
// configresolve: {
// root : path.join(__dirname, "src") webpack1方式
modules : [ path.join(__dirname, "src"), // 优先于node_modules/搜索
"node_modules"
]}// 修改 js/app.js// 在js文件夹中，增加一个lodash.js，如果按照上面的配置了modules，则会优先加载我们自己的lodash库import '../css/style.less';import _ from 'lodash';console.log(_.isObject([1, 2, 3]));document.getElementById('container').textContent = 'APP';// js/lodash.jsexport default {
isObject(a) {
console.log('this is my lodash library!');
return a && typeof a === 'object';
}}得到的结果如下图：
3. module相关
3.1 module.rules替换module.loaders
The old loader configuration was superseded by a more powerful rules system, which allows configuration of loaders and more. For compatibility reasons, the old
module.loaderssyntax is still valid and the old names are parsed. The new naming conventions are easier to understand and are a good reason to upgrade the configuration to usingmodule.rules.
大意就是新的命名更容易理解(反正对于我来说就是换了个英文单词:-D)，同时还会兼容老的方式，也就是说，你照样写module.loaders还是可以的。
module : {
// webpack1 way
// loaders : [...]
// now
rules : [
...
]}3.2 module[*].loader写法
如果需要加载的模块只需要一个loader，那么你还是可以直接用loader这个关键词；如果要加载的模块需要多个loader，那么你需要使用use这个关键词，在每个loader中都可以配置参数。代码如下：
module : {
rules : [ { test : /\.js|\.jsx$/, loader : 'babel-loader' },
/* 如果后面有参数需要传递到当前的loader，则在后面继续加上options关键词，例如： { test : /\.js|\.jsx$/, loader : 'babel-loader', options : { presets : [ 'es2015', 'react' ] } } */
{
test : /\.css$/,
// webpack1 way
// loader : 'style!css'
use : [ 'style-loader', 'css-loader' ] },
{
test : /\.less$/,
use : [ 'style-loader', // 默认相当于 { loader : 'style-loader' }
{
loader : 'css-loader',
options : {
modules : true
}
},
'less-loader'
] }
]}3.2 取消自动添加-loader后缀
之前写loader通常是这样的：
loader : 'style!css!less'// equals toloader : 'style-loader!css-loader!less-loader'
都自动添加了-loader后缀，在webpack2中不再自动添加，如果需要保持和webpack1相同的方式，可以在配置中添加一个属性，如下：
module.exports = {
... resolveLoader : {
moduleExtensions : ["-loader"] }}// 然后就可以继续这样写，但是官方并推荐这样写// 不推荐的原因主要就是为了照顾新手，直接写会让刚接触的童鞋感到困惑// github.com/webpack/webpack/issues/2986use : [ 'style', 'css', 'less' ]3.3 json-loader内置啦
如果要加载json文件的童鞋再也不需要配置json-loader了，因为webpack2已经内置了。
4. plugins相关
4.1 UglifyJsPlugin 代码压缩插件
压缩插件中的warnings和sourceMap不再默认为true，如果要开启，可以这样配置
plugins : [ new UglifyJsPlugin({
souceMap : true,
warnings : true
})
]4.2 ExtractTextWebapckPlugin 文本提取插件
主要是写法上的变动，要和webpack2配合使用的话，需要使用version 2版本
// webpack1 waymodules : {
loaders : [ {
test : /\.css$/,
loader : ExtractTextPlugin.extract('style-loader', 'css-loader', { publicPath : '/dist' }) }
]},plugins : [ new ExtractTextPlugin('bunlde.css', { allChunks : true, disable : false })
]// webapck2 waymodules : {
rules : [ {
test : /\.css$/,
use : ExtractTextPlugin.extract({
fallback : 'style-loader',
use : 'css-loader',
publicPath : '/dist'
}) }
]},plugins : [ new ExtractTextPlugin({
filename : 'bundle.css',
disable : false,
allChunks : true
})
]5. loaders的debug模式
在webpack1中要开启loaders的调试模式，需要加载debug选项，在webpack2中不再使用，在webpack3或者之后会被删除。如果你想继续使用，那么请使用以下写法：
// webpack1 waydebug : true// webapck2 way // webapck2将loader调试移到了一个插件中plugins : [ new webpack.LoaderOptionsPlugin({
debug : true
})
]6. 按需加载方式更改
6.1 import()方式
在webpack1中，如果要按需加载一个模块，可以使用require.ensure([], callback)方式，在webpack2中，ES2015 loader定义了一个import()方法来代替之前的写法，这个方法会返回一个promise.
// 在js目录中新增一个main.js// js/main.jsconsole.log('main.js');// webpack1 wayrequire.ensure([], function(require) {
var _ = require('./lodash').default;
console.log(_);
console.log('require ensure');
console.log(_.isObject(1));});// webpack2 way// 采用这种方式，需要promise 的 polyfill// 两种方式：// 1. npm install es6-promise --save-dev// require('es6-promise').polyfill();//// 2. babel方式，在webpack中配置babel插件// npm install babel-syntax-dynamic-import --save-dev// options : {// presets : ['es2015'],// plugins : ['syntax-dynamic-import']// }import('./lodash').then(module => {
let _ = module.default;
console.log(_);
console.log('require ensure');
console.log(_.isObject(1));});会得到的chunk文件，如下图：
http://www.cnblogs.com/rynxiao/p/7171583.html
更多精彩分享
- 万码学堂联系方式 2024-10-13 10:32:18.507
- 珊珊老师——北京IT机构十年一线教学经验 2024-08-28 11:43:55.863
- 陆老师 [海军工程大学 硕士 — 嵌入式开发专家] 2024-03-26 11:26:03.003
- 时光飞逝 2024-03-26 11:25:53.823
- 纸上得来终觉浅 2024-03-26 11:25:42.68
- 软件行业发展七大方向 2024-03-26 11:25:34.457
- 如何组建测试团队？ 2024-03-26 11:25:25.33
- 在青岛学习JavaEE哪家学校最好？ 2024-03-26 11:25:16.78
- 教务排课系统 2024-03-26 11:24:56.74
- 青岛帕特智能科技有限公司 2024-03-26 11:24:30.433
万码学堂联系方式