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' },其他寫法1、"-loader"其實是可以省略不寫的，多個loader之間用“!”連接起來。
//{ test: /\.css$/, loaders: ["style", "css"] }，其他寫法2、用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文件，通過代碼分割成單元片段並按需加載。