webpack 2 开发和部署技巧

来源：互联网发布：天互数据赵编辑：程序博客网时间：2024/06/05 13:52

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 scriptnew 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.jsnew webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),new HtmlwebpackPlugin({  title: 'Hello World app'})]

生成多页面

config配置

entry: {//三个入口文件，app, mobile和 vendorsapp: 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插入到标签里  inject: '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傻瓜指南（二）开发和部署技巧张轩

阅读全文

1 0