工作过程中对于前端模块打包的小结

说明

  1. 代码拆分：Webpack 有两种组织模块依赖的方式，同步和异步。异步依赖作为分割点，形成一个新的块。在优化了依赖树后，每一个异步区块都作为一个文件被打包。
  2. Loader：Webpack 本身只能处理原生的 JavaScript 模块，但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样，任何资源都可以成为 Webpack 可以处理的模块。
  3. 智能解析：Webpack 有一个智能解析器，几乎可以处理任何第三方库，无论它们的模块形式是 CommonJS、 AMD 还是普通的 JS 文件。甚至在加载依赖的时候，允许使用动态表达式 require(“./templates/” + name + “.jade”)。
  4. 插件系统：Webpack 还有一个功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的，还可以开发和使用开源的 Webpack 插件，来满足各式各样的需求。
  5. 快速运行：Webpack 使用异步 I/O 和多级缓存提高运行效率，这使得 Webpack 能够以令人难以置信的速度快速增量编译。

安装

Global: npm install webpack -g

编译

  1. 执行 webpack ，编译入口文件 entry.js 并打包到 bundle.js， webpack entry.js bundle.js
  2. 编译配置文件 webpack.config.js，去配置 entry.js 文件和 bundle.js 文件路径
 1
 2
 3
 4
 5
 6
 7
 8
 9
10

var webpack = require('webpack')

module.exports = {
  entry: './entry.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  }
}

Library

  1. 初始化项目 npm init生成 package.js
  2. 安装jquery依赖 npm install --save-dev

Loader

  1. 安装loader npm instal css-loader style-loader -save-dev
  2. 修改配置文件模块 module
  3. 安装Babel 包， Babel 是编写下一代 JavaScript 的编译器。这个包允许使用 Babel 和 webpack 转换 JavaScript 文件
  4. babel-loader配置
  5. 安装命令 npm install babel-loader babel-core babel-preset-es2015 babel-plugin-transform-runtime babel-preset-stage-0 --save-dev
  6. 在 webpack.config.js 里配置 babel
  7. 排除匹配文件夹可提高执行速度，多个文件夹写法exclude: /(node_modules|bower_components)/,
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

babel: {
    presets: ['es2015', 'stage-0'],
    plugins: ['transform-runtime']
}

//或者放在 .babelrc文件中
{
    presets: ['es2015', 'stage-0'],
    plugins: ['transform-runtime']
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

var webpack = require('webpack');

module.exports = {
  entry: './entry.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module:{
    loaders: [
        {
            test: /\.css$/,
            loader: "style-loader!css-loader"
        },
        {
          test: /\.js$/,
          loader: "babel-loader",
          exclude:/node_modules/,
          query: {
            presets: ['es2015', 'stage-0'],
            plugins: ['transform-runtime']
          }
        }
    ]
  }
}

结合vue进行组件化开发

  1. 安装 vue 组件 npm install vue vue-loader vue-html-loader vue-style-loader --save-dev
  2. 在 webpack.config.js 中引入 vue-loader
  3. 需要实时编译模板，而非使用自带的runtime-only，需要引入如下配置
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

var webpack = require('webpack');

module.exports = {
  entry: './entry.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module:{
    loaders: [
        {
            test: /\.css$/,
            loader: "style-loader!css-loader"
        },
        {
          test: /\.js$/,
          loader: "babel-loader",
          exclude:/node_modules/,
          query: {
            presets: ['es2015', 'stage-0'],
            plugins: ['transform-runtime']
          }
        },
        {
          test: /\.vue$/,
          loader: "vue-loader"
        }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
    }
  }
}

命令

  1. webpack –display-modules
  2. webpack –display-modules –display-reasons
  3. webpack -d devtools
  4. webpack -p 执行优化文件压缩
  5. webpack -w 后台监控代码修改自动执行webpack

webpack-dev-server

  1. 全局安装 npm install webpack-dev-server -g
  2. 执行 webpack-dev-server --inline --hot

配置文件和插件

  1. 区分线上和线下的变量 debug = process.env.NODE_ENV !== "production";
  2. 修改配置文件如下
  3. 生成json文件 webpack -- profile --json > demo.js，使用 webpack-analyse上传你的json文件进行分析，或者推荐使用另外一种比较不错的插件webpack-visualizer
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

//是否生成sourcemap
//线上引用插件相关 https://github.com/webpack/docs/wiki/list-of-plugins
{
    debug = process.env.NODE_ENV !== "production
    "devtools": debug ? "sourcemap" : null,
    "plugins": debug ? [] : [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UgifyJsPlugin({mangle: false, sourcemap: false}),
    ]
}