Webpack教程二

时间  2019-11-10
标签 webpack 教程 繁體版
原文   原文链接

Webpack教程一

开发技巧

启用source-map

如今的代码是合并之后的代码，不利于排错和定位，只须要在config中添加javascript

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

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

配置webpack-dev-server代理

既然经常使用webpack作React一类的SPA，那么一个典型的例子就是先后端分离。后端是一个RESTful的server无论用什么写的。假定在本机他是相似*这类的请求，如今添加配置让ajax请求能够直接proxy过去。html

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

重启之后 发现/api/*的请求都代理到去了～java

更多的方法能够看官方文档 Webpack dev server proxyjquery

使用preLoaders和postLoaders

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


安装jshint
npm install jshint-loader --save-dev

　　在config文件中配置git

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

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

好了 如今每次npm run start的时候就能够看到jshint的提示信息啦es6

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

这个是很是有用的内容!github

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

先建立一个jQuery plugin: plugin.js

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

第一种方法 使用webpack.ProvidePlugin

webpack提供一个插件 把一个全局变量插入到全部的代码中，在config.js里面配置

  ...
  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('<p>promise result is ' + number + ' now is ' + moment().format() + '</p>');
  //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('<p>promise result is ' + number + ' now is ' + moment().format() + '</p>');
  //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 = '<h1>Hello World</h1>';
  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

<!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.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

<body>
  <h3>Welcome to webpack</h3>
  <script src="vendors.js"></script><script src="app.js"></script>
</body>

　　mobile.html

<body>
  <h3>Welcome to mobile page</h3>
  <script src="vendors.js"></script><script src="mobile.js"></script>
</body>

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

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

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

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

index.html

<body>
  <h3>Welcome to webpack</h3>
  <script src="vendors.js"></script><script src="app.b6641abee64c999d95c1.js"></script>
</body>

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

结语

第二部分到这里结束，这一节讨论不少webpack的使用技巧，看起来比较琐碎，可是在你工做中也许会很实用，下一部分会出现你们都期待的高大上的东西，Webpack和React和Backbone等的结合。

很硬的连接

repo的代码已经更新，想看全部源码的能够clone下 vikingmute/webpack-basic-starter · GitHub

同时这一系列关于Webpack的文章也能够在github找到 vikingmute/webpack-for-fools · GitHub

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程