webpack 2 开发和部署技巧

最新推荐文章于 2024-04-09 21:02:49 发布

小仙女儿

最新推荐文章于 2024-04-09 21:02:49 发布

阅读量376

点赞数 1

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/zula1994/article/details/77062736

版权

webpack 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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插入到标签里
  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

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录