开发技巧

启用source-map

现在的代码是合并以后的代码，不利于排错和定位，只需要在config中添加

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

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

配置webpack-dev-server代理

既然常用webpack做React一类的SPA，那么一个典型的例子就是前后端分离。后端是一个RESTful的server不管用什么写的。假定在本机他是类似[http://localhost:5000/api/@*
]这类的请求，现在添加配置让ajax请求可以直接proxy过去。

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

更多的方法可以看官方文档 Webpack dev server proxy

使用preLoaders和postLoaders

也许你想在写代码的时候检查自己的js是否符合jshint的规范，那么隆重推荐preLoaders和postLoaders，上一节我们已经非常了解loaders了，用它来处理各种类型的文件。perLoaders顾名思义就是在loaders执行之前处理的，webpack的处理顺序是perLoaders - loaders - postLoaders。

在config文件中配置

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

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

好了现在每次npm run start的时候就可以看到jshint的提示信息啦

加载jQuery plugin或者其他legacy第三方库

这个是非常有用的内容!

你的项目有时候会要加载各种各样的第三方库，一些老的库不支持AMD或者CommonJS等一些先进的格式，比如一些jQuery的插件，它们都依赖jQuery，如果直接引用就会报错 jQuery is not undefined这类的错误，有几种方法解决

先创建一个jQuery plugin: plugin.js

(function ($) {
    const shade = "#556b2f";
    $.fn.greenify = function() {
        this.css( "color", shade );
        return this;
    };
}(jQuery));

第一种方法使用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"
    })
  ]
  ...

在js中引用

...
//这个也不需要了 因为$, jQuery, window.jQuery都可以直接使用了
//import $ from 'jquery';
import './plugin.js';
...
myPromise.then((number) => {
  $('body').append('promise result is ' + number + ' now is ' + moment().format() + '');
  //call our jquery plugin!
  $('p').greenify();
});
...

发现我们插入的p里面的颜色已经变成了绿色！

第二种方法使用imports-loader

先安装这个loader

npm install imports-loader --save-dev

然后在入口js中

//注意这种写法 我们把jQuery这个变量直接插入到plugin.js里面了
//相当于在这个文件的开始添加了 var jQuery = require('jquery');
import 'imports?jQuery=jquery!./plugin.js';

//后面的代码一样
myPromise.then((number) => {
  $('body').append('promise result is ' + number + ' now is ' + moment().format() + '');
  //call our jquery plugin!
  $('p').greenify();
});

部署上线

刚才说的各种情况都是在开发时候的情况，那么假如项目已经开发完了，需要部署上线了。我们应该新创建一个单独的config文件，因为部署上线使用webpack的时候我们不需要一些dev-tools,dev-server和jshint校验等。

复制我们现有的config文件，命名为 webpack.production.config.js，将里面关于 devServer等和开发有关的东西删掉。

在package.json中添加一个命令。

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

当要上线的时候,运行

npm run build

可以发现build文件夹中生成了所有东西。

分离app.js和第三方库

现在我们build出来的只有一个bundle.js 如果第三方库很多的话，会造成这个文件非常大，减慢加载速度，现在我们要把第三方库和我们app本身的代码分成两个文件。

修改entry入口文件

  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'
    })
  ]

添加完毕运行npm run build

在build文件夹中发现如下结构

budle.js
index.html
vendors.js

生成多页面

应用不可能都是SPA，不可能只生成一个html文件，如果想生成多个html页面这么玩？其实也是很简单的: 现在的需求是这样的，有两个页面，一个叫index.html 它需要引用vendors.js和app.js这两个文件，还有一个mobile.html页面他要引用vendors.js和mobile.js这两个文件。

首先新建一个叫mobile.js的入口文件，比app.js更简单一些

import './main.scss';
import $ from 'jquery';
import 'imports?jQuery=jquery!./plugin.js';

$(document).ready(function() {
  let app  = document.createElement('div');
  app.innerHTML = 'Hello World';
  document.body.appendChild(app);
  $('h1').greenify();
});

在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'
  },

原来我们是没有模版文件的，原来利用的HtmlWebpackPlugin的默认模版。谁想到这伟大的插件还可以自定义模版。所以新建一个专门放模版的文件夹templates,在里面加两个模版文件index.html 和 mobile.html

index.html



  
    {%= o.htmlWebpackPlugin.options.title %}
  
  
    Welcome to webpack

mobile.html



  
    {%= o.htmlWebpackPlugin.options.title %}
  
  
    Welcome to mobile page

继续配置config.js,现在让HtmlwebpackPlugin可以生成多个文件

...
//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'
  })
  ...
]

然后运行

npm run build

看看生成好的伟大的文件，没问题！

app.js
mobile.js
vendors.js
index.html
mobile.html

看看引用的对应关系，完美！！

index.html


  Welcome to webpack

mobile.html


  Welcome to mobile page

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

经典问题,代码更新了，但是浏览器有缓存，到时候就傻了。怎么解决，换名字呗。可以直接在后面加参数,也可以直接换掉文件名字。 webpack提供给了我们非常简单的方法，基于文件的md5，只要把

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

运行完build以后，看看生成的文件，很完美～

index.html


  Welcome to webpack

好了，你现在了解webpack作为一个module bundler的精髓了吧，把我们的例子做成一个图，帮助你理解一下。

image.png

文件压缩

//使用插件html-webpack-plugin打包合并html
//使用插件extract-text-webpack-plugin打包独立的css
//使用UglifyJsPlugin压缩代码
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var webpack = require("webpack");
module.exports = {
    entry: {
        bundle : './src/js/main.js'
    },
    output: {
        filename: "[name]-[hash].js",
        path: __dirname + '/dist'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            }
        ]
    },
    resolve:{
            extensions:['.js','.css','.json']  //用于配置程序可以自行补全哪些文件后缀
    },

    plugins:[
        new HtmlWebpackPlugin({
            title: 'hello webpack',
            template:'src/component/index.html',
            inject:'body',
            minify:{ //压缩HTML文件
                 removeComments:true,    //移除HTML中的注释
                 collapseWhitespace:true    //删除空白符与换行符
             }
        }),
        new ExtractTextPlugin("[name].[hash].css"),
        new webpack.optimize.UglifyJsPlugin({
            compress: {     //压缩代码
                dead_code: true,    //移除没被引用的代码
            },
            except: ['$super', '$', 'exports', 'require']    //混淆,并排除关键字
        })
    ]
};

webpack开发部署技巧

开发技巧

启用source-map

配置webpack-dev-server代理

使用preLoaders和postLoaders

在config文件中配置

加载jQuery plugin或者其他legacy第三方库

这个是非常有用的内容!

第一种方法使用webpack.ProvidePlugin

第二种方法使用imports-loader

部署上线

分离app.js和第三方库

修改entry入口文件

添加CommonsChunkPlugin

生成多页面

Hello World

index.html

Welcome to webpack

mobile.html

Welcome to mobile page

index.html

Welcome to webpack

mobile.html

Welcome to mobile page

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

index.html

Welcome to webpack

文件压缩

你可能感兴趣的:(webpack开发部署技巧)

webpack开发部署技巧

开发技巧

启用source-map

配置webpack-dev-server代理

使用preLoaders和postLoaders

在config文件中配置

加载jQuery plugin或者其他legacy第三方库

这个是非常有用的内容!

第一种方法 使用webpack.ProvidePlugin

第二种方法 使用imports-loader

部署上线

分离app.js和第三方库

修改entry入口文件

添加CommonsChunkPlugin

生成多页面

Hello World

index.html

Welcome to webpack

mobile.html

Welcome to mobile page

index.html

Welcome to webpack

mobile.html

Welcome to mobile page

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

index.html

Welcome to webpack

文件压缩

你可能感兴趣的:(webpack开发部署技巧)

第一种方法使用webpack.ProvidePlugin

第二种方法使用imports-loader