webpack的使用/工做流程/原理

webpack的使用以及工做流程
一.安裝準備工做
1.首先安裝node.js
2.全局指令安裝webpack或基於項目安裝

npm install webpack -g

3.建立一個項目根目錄cd至項目根目錄
初始化一個項目，會生成一個package.json文件

npm init

二.初步webpackp配置
1.在你的項目目錄下建立webpack.config.js配置文件, 經過這個文件進行webpack的配置, 而且還要建立一些路徑保存基本文件. 例如:

src文件夾：

2.在src的js下建立一個入口文件, 我建立的叫作entry.js, 在項目目錄再建立一個index.html用來調試使用. 編寫webpack.config.js文件:

//webpack.config.js
module.exports = {
    entry : './src/js/entry.js',//入口文件
    output : {//輸出文件
        filename : 'index.js',//輸出文件名
        path : __dirname + '/out'//輸出文件路徑
    },

三.webpack進一步配置

開發服務器配置（devSever）
module.loaders配置
plugins配置（內置插件與外置插件）

//詳細的webpack.config.js結構分析：
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var TransferWebpackPlugin = require('transfer-webpack-plugin');
 
module.exports = {
    devtool: 'source-map',//因爲打包後的代碼是合併之後的代碼，不利於排錯和定位，只須要在config中添加，這樣出錯之後就會採用source-map的形式直接顯示你出錯代碼的位置。
    //noParse:[/jquery/],//表示跳過jquery,不對其進行編譯,這樣能夠提升打包的速度
    //頁面入口文件配置
    entry: {
        page1: "./src/index.js",
        //page2: ["./src/index.js", "./src/main.js"],支持數組形式，將加載數組中的全部模塊，但以最後一個模塊做爲輸出
    },
    //入口文件輸出配置
    output: {
        path: "dist/js/page",
        filename: "[name].bundle.js",// page1.bundle.js 和 page2.bundle.js，並存放到 ./dist/js/page 文件夾下。
        publicPath: "/dist/"    //網站運行時的訪問路徑。
    },
    resolveLoader: {
        //指定默認的loader路徑，不然依賴走到上游會找不到loader
        root: path.join(__dirname, 'node_modules'),
        alias: {//給本身寫的loader設置別名
            "seajs-loader": path.resolve( __dirname, "./web_modules/seajs-loader.js" )
        }
    },
    //新建一個開發服務器，而且當代碼更新的時候自動刷新瀏覽器。
    devServer: {
        historyApiFallback: true,
        noInfo: true,
        hot: true,
        inline: true,
        progress: true,
        port:9090 //端口你能夠自定義
    },
    module: {
        // module.loaders 是最關鍵的一塊配置。它告知 webpack每一種文件都須要使用什麼加載器來處理：
        loaders: [
        { test: /\.css$/, loader: 'style-loader!css-loader' },//.css 文件使用 style-loader 和 css-loader 來處理.
        //{ test: /\.css$/, loader: 'style!css' },其餘寫法一、"-loader"實際上是能夠省略不寫的，多個loader之間用「!」鏈接起來。
        //{ test: /\.css$/, loaders: ["style", "css"] }，其餘寫法二、用loaders數組形式;
        //.scss 文件使用 style-loader、css-loader 和 sass-loader 來編譯處理。
        //在chrome中咱們經過sourcemap能夠直接調試less、sass源文件文件
        { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
        { test: /\.less$/, loader: 'style!css!less?sourceMap'},//.less 文件使用 style-loader、css-loader 和 less-loader 來編譯處理
        //.js 文件使用babel-loader來編譯處理,設置exclude用來排除node_modules這個文件夾中的代碼
        { test: /\.js$/, loader: 'babel!jsx',exclude: /node_modules/ }, 
        { test: /\.jsx$/, loader: "jsx-loader?harmony" },//.jsx 文件使用 jsx-loader 來編譯處理
        { test: /\.json$/,loader: 'json'},
        //{ test: /\.(png|jpg|jpeg|gif)$/, loader: 'url-loader?limit=8192'}, //圖片文件使用 url-loader 來處理，小於8kb的直接轉爲base64
        {test: /\.(png|jpg|gif|svg)$/,loader: 'url',
            query: {limit: 10000,name: '[name].[ext]?[hash]'}//設置圖片名稱擴展名
        },
        { test: /\.jade$/, loader: "jade-loader" },//.jade 文件使用 jade-loader 來編譯處理
        { test: /\.ejs$/, loader: "ejs-loader" },//.ejs 文件使用 ejs-loader 來編譯處理
        { test: /\.handlebars$/, loader: "handlebars-loader" },//.handlebars 文件使用handlebars-loader來編譯處理handlebars模板文件
        { test: /\.dot$/, loader: "dot-loader" },//.dot 文件使用 dot-loader 來編譯處理dot模板文件
        { test: /\.vue$/, loader: "vue-loader" },//.vue 文件使用 vue-loader 來編譯處理
        { test: /\.coffee$/, loader: 'coffee-loader' },//.coffee 文件使用 coffee-loader 來編譯處理
        { test: /\.html$/,loader: 'vue-html'},
        { test: /\.woff$/,loader: "url?limit=10000&minetype=application/font-woff"},
        { test: /\.ttf$/,loader: "file"},
        { test: /\.eot$/,loader: "file"},
        { test: /\.svg$/,loader: "file"}
        ]
    },
    //份內置插件和外置插件
    plugins: [
        //使用了一個 CommonsChunkPlugin 的插件，它用於提取多個入口文件的公共腳本部分，而後生成一個common.js來方便多頁面之間進行復用。
        new webpack.optimize.CommonsChunkPlugin('common.js'),
        new webpack.optimize.UglifyJsPlugin({//壓縮文件
          compressor: {
            warnings: false,//supresses warnings, usually from module minification
          },
          except: ['$super', '$', 'exports', 'require']    //排除關鍵字(可選)
        }),
        new webpack.DefinePlugin({// definePlugin 接收字符串插入到代碼當中, 因此你須要的話能夠寫上 JS 的字符串
             __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true')),
             __PRERELEASE__: JSON.stringify(JSON.parse(process.env.BUILD_PRERELEASE || 'false'))
        }),
        new webpack.ProvidePlugin({//把一個全局變量插入到全部的代碼中,支持jQuery plugin的使用;使用ProvidePlugin加載使用頻率高的模塊
             //provide $, jQuery and window.jQuery to every script
             $: "jquery",
             jQuery: "jquery",
             "window.jQuery": "jquery"
         }),
        new webpack.NoErrorsPlugin(), //容許錯誤不打斷程序
        new TransferWebpackPlugin([ //把指定文件夾下的文件複製到指定的目錄
          {from: 'www'}
        ], path.resolve(__dirname,"src")),
        new HtmlwebpackPlugin({//用於生產符合要求的html文件;
           title: 'Hello World app',
           filename: 'assets/admin.html'
        })
    ],
    //其它解決方案配置
    resolve: {
        root: 'E:/github/flux-example/src', //絕對路徑, 查找module的話從這裏開始查找(可選)
        extensions: ['', '.js', '.html', '.css', '.scss'], //自動擴展文件後綴名，意味着咱們require模塊能夠省略不寫後綴名
        alias: {                            //模塊別名定義，方便後續直接引用別名，無須多寫長長的地址//後續直接 require('AppStore') 便可
            AppStore : 'js/stores/AppStores.js',
            ActionType : 'js/actions/ActionType.js',
            AppAction : 'js/actions/AppAction.js'
        },
        modulesDirectories: [//取相對路徑，因此比起 root ，因此會多不少路徑。查找module(可選)
             'node_modules',
             'bower_components',
             'lib',
             'src'
        ]
    }
     
};
 
if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),
    //爲組件分配ID，經過這個插件webpack能夠分析和優先考慮使用最多的模塊，併爲它們分配最小的ID
    new webpack.optimize.OccurenceOrderPlugin()
  ])
}

webpack原理：
參考學習：https://blog.csdn.net/u014168594/article/details/77099315
https://blog.csdn.net/u014168594/article/details/77198729
把全部依賴打包成一個bundle.js文件，經過代碼分割成單元片斷並按需加載。