您的位置：首页 > Web前端 > Webpack

webpack 2 开发和部署技巧

2017-08-10 17:03 274 查看

webpack 开发和部署技巧

开发技巧

启用source-map 出错以后就会采用source-map的形式直接显示你出错代码的位置。

config添加

...
devtool: 'eval-source-map',
...

配置webpack-dev-server代理 (当后端server的端口或者接口不一样，可以用代理。。。mock服务也可以用代理。。。mock方法可以看我的另一篇博客→前端虚拟接口—mock的用法)

config配置

devServer: {
hot: true,
inline: true,
//其实很简单的，只要配置这个参数就可以了
proxy: {
'/api/*': {
target: 'http://localhost:5000',
secure: false
}
}
}

使用preLoaders和postLoaders 检查js是否报错

安装loader

npm install jshint-loader --save-dev

config配置

config配置

module: {
...
//和loaders一样的语法，很简单
perLoaders: [
{
test: /\.jsx?$/,
include: APP_PATH,
loader: 'jshint-loader'
}
]
}

...
//配置jshint的选项，支持es6的校验
jshint: {
"esnext": true
},

加载jQuery plugin或者其他legacy第三方库（目前我还没用过。。尴尬(◎-◎；)）

第一种方法使用webpack.ProvidePlugin

...
plugins: [
new HtmlwebpackPlugin({
title: 'Hello World app'
}),
//provide $, jQuery and window.jQuery to every script
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
]
...

第二种方法使用imports-loader

安装laoder:

npm install imports-loader --save-dev

入口js中添加

import 'imports?jQuery=jquery!./plugin.js';

部署上线

新建webpack.production.config.js 复制粘贴 webpack.config.js —-

线上的webpack不需要dev-tools, dev-server, jshint校验等，删除相关代码。

package.json添加命令

"scripts": {
"start": "webpack-dev-server --hot --inline",
"build": "webpack --progress --profile --colors --config webpack.production.config.js"
},

项目打包

npm run build

优化

分离app.js和第三方库（将自己的业务代码和第三方库分离）

修改enrty入口文件

entry: {
app: path.resolve(APP_PATH, 'index.js'),
//添加要打包在vendors里面的库
vendors: ['jquery', 'moment']
},

添加CommonsChunkPlugin

plugins: [
//这个使用uglifyJs压缩你的js代码
new webpack.optimize.UglifyJsPlugin({minimize: true}),
//把入口文件里面的数组打包成verdors.js
new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
new HtmlwebpackPlugin({
title: 'Hello World app'
})
]

生成多页面

config配置

entry: {
//三个入口文件，app, mobile和 vendors
app: path.resolve(APP_PATH, 'index.js'),
mobile: path.resolve(APP_PATH, 'mobile.js'),
vendors: ['jquery', 'moment']
},
output: {
path: BUILD_PATH,
//注意 我们修改了bundle.js 用一个数组[name]来代替，他会根据entry的入口文件名称生成多个js文件，这里就是(app.js,mobile.js和vendors.js)
filename: '[name].js'
},

建立模板文件 index.html mobile.html 放在template文件夹中

index.html

<!DOCTYPE html>
<html>
<head>
<title>{%= o.htmlWebpackPlugin.options.title %}</title>
</head>
<body>
<h3>Welcome to webpack</h3>
</body>
</html>

mobile.html

<!DOCTYPE html>
<html>
<head>
<title>{%= o.htmlWebpackPlugin.options.title %}</title>
</head>
<body>
<h3>Welcome to mobile page</h3>
</body>
</html>

配置config

...
//Template的文件夹路径
var TEM_PATH = path.resolve(ROOT_PATH, 'templates');
...
plugins: [
...
//创建了两个HtmlWebpackPlugin的实例，生成两个页面
new HtmlwebpackPlugin({
title: 'Hello World app',
template: path.resolve(TEM_PATH, 'index.html'),
filename: 'index.html',
//chunks这个参数告诉插件要引用entry里面的哪几个入口
chunks: ['app', 'vendors'],
//要把script插入到标签里
injec
4000
t: 'body'
}),
new HtmlwebpackPlugin({
title: 'Hello Mobile app',
template: path.resolve(TEM_PATH, 'mobile.html'),
filename: 'mobile.html',
chunks: ['mobile', 'vendors'],
inject: 'body'
})
...
]

生成Hash名称的script来防止缓存

config配置

output: {
path: BUILD_PATH,
//只要再加上hash这个参数就可以了
filename: '[name].[hash].js'
},

学习链接→Webpack傻瓜指南（二）开发和部署技巧张轩

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： webpack

相关文章推荐

新的分享

章节导航