使用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}),
    ]
}