使用webpack打包你的Project

webpack

说明

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 能够以令人难以置信的速度快速增量编译。

安装

1. Global: npm install webpack -g

编译

1. 执行 webpack ，编译入口文件 entry.js 并打包到 bundle.js， webpack entry.js bundle.js

2. 编译配置文件 webpack.config.js，去配置 entry.js 文件和 bundle.js 文件路径

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)/,

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

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

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，需要引入如下配置

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

//是否生成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}),
    ]
}