寫在前面的話
現(xiàn)在最流行的前端架構(gòu)應(yīng)該就是webpack+react+rudex+router+es6這套了，最近練習(xí)了webpack2蓝仲，寫出來和各位同學(xué)交流一下，本文只針對這套工具搭配介紹官疲，沒有對單獨(dú)工具詳細(xì)說明袱结，第一次寫這種分享，有不好的地方請多指教途凫。
webpack是什么垢夹？
直接引用官方的介紹：Webpack 是當(dāng)下最熱門的前端資源模塊化管理和打包工具。它可以將許多松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源维费。還可以將按需加載的模塊進(jìn)行代碼分隔果元，等到實(shí)際需要的時候再異步加載。通過 loader 的轉(zhuǎn)換犀盟，任何形式的資源都可以視作模塊而晒，比如 CommonJs 模塊、 AMD 模塊阅畴、 ES6 模塊倡怎、CSS、圖片贱枣、 JSON监署、Coffeescript、 LESS 等冯事。
需要工具
編譯工具推薦idea焦匈，使用npm安裝包，node自帶npm
初始化
npm init
執(zhí)行完npm init后昵仅，根目錄會出現(xiàn)一個package.json文件缓熟，這個文件可以看到我們的文件配置信息，還可以根據(jù)這個文件進(jìn)行npm包管理
項(xiàng)目開始
先安裝需要的各種包
babel
Babel 用于轉(zhuǎn)化你的 JavaScript 代碼摔笤，默認(rèn)情況下够滑，Babel 自帶了一組 ES2015 語法轉(zhuǎn)化器。這些轉(zhuǎn)化器能讓你現(xiàn)在就使用最新的 JavaScript 語法吕世，而不用等待瀏覽器提供支持彰触。
loader
css-loader 處理css中路徑引用等問題
style-loader 動態(tài)把樣式寫入css
less-loader less編譯器
postcss-loader less再處理
file-loader 用來處理圖片
image-webpack-loader?
等等，相信大家這些都看的煩煩的命辖，我就一次性把所需要的包全貼出來况毅，大家在命令行執(zhí)行一下npm i就好分蓖，不用一個個安裝
下面是我的package.js里的devDependencies安裝包，大家直接拷貝過去就好
"devDependencies":{
? "autoprefixer":"^7.1.1",
? "babel-cli":"^6.24.1",
? "babel-core":"^6.25.0",
? "babel-loader":"^7.0.0",
? "babel-plugin-react-transform":"^2.0.2",
? "babel-preset-es2015":"^6.24.1",
? "babel-preset-latest":"^6.24.1",
? "babel-preset-react":"^6.24.1",
? "clean-webpack-plugin":"^0.1.16",
? "css-loader":"^0.28.4",
? "extract-text-webpack-plugin":"^2.1.2",
? "file-loader":"^0.11.1",
? "html-webpack-plugin":"^2.28.0",
? "image-webpack-loader":"^3.3.1",
? "jquery":"^3.2.1",
? "less":"^2.7.2",
? "less-loader":"^4.0.4",
? "moment":"^2.18.1",
? "postcss-import":"^10.0.0",
? "postcss-loader":"^2.0.5",
? "react":"^15.5.4",
? "react-dom":"^15.5.4",
? "react-redux":"^5.0.5",
? "react-router":"^4.1.1",
? "react-router-dom":"^4.1.1",
? "react-router-redux":"^4.0.8",
? "react-transform-hmr":"^1.0.4",
? "redux":"^3.6.0",
? "style-loader":"^0.18.1",
? "url-loader":"^0.5.8",
? "webpack":"^2.6.1"
},
"dependencies":{
? "react-redux":"^5.0.5"
}
執(zhí)行完npm i以后尔许，各種包也就安裝好了么鹤，為了節(jié)省發(fā)開步驟味廊，我們會把相關(guān)的命令配置到一個文件里蒸甜，在根目錄下建一個webpack.config.js，下面我把我的配置貼出來,
constpath =require('path');
constwebpack =require('webpack');
lethtmlWebpackPlugin =require('html-webpack-plugin');
module.exports= {
context:__dirname+'/app',
entry: ['./main.jsx'],
output: {
path: path.resolve(__dirname+'/dist'),
filename:'bundle.js',
//publicPath: "http:/cdn.com" //在引用文件加上絕對路徑
},module: {
loaders: [
{
test:/\.jsx?$/,
loader:"babel-loader?cacheDirectory",
exclude:/node_modules/,
include:/app/
},
{
test:/\.css$/,
//loaders: ['style-loader','css-loader?postcss-loader']
use:[
'style-loader','css-loader?minimize?importLoaders=1','postcss-loader'
]
},
{
test:/\.less/,
//loaders: ['style-loader','css-loader?postcss-loader']
use:[
'style-loader','css-loader?minimize?importLoaders=1','postcss-loader','less-loader'
]
},
{
test:/\.(gif|png|jpe?g|svg)$/i,
loaders: [
'file-loader?hash=sha512&digest=hex&name=[hash:5].[ext]',
'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
}
]
},
plugins: [
newwebpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"window.jQuery":"jquery"
}),
//new ExtractTextPlugin('[name].css'),余佛、
newhtmlWebpackPlugin({
template:__dirname+'/build/index.html',
filename:'index.html',
title:'111',
//inject: false,? //將引用的文件放到哪里
//chunks: ['main'],? ? //只引入mian
//excludeChunks: ['main'], //剛好和chunks相反
// minify: {
//? ? removeComments: true,? //刪除注釋
//? ? collapseWhitespace: true,? //刪除空格
// }
}),
],
devServer: {
disableHostCheck:true,
proxy: {
'': {
changeOrigin:true,
target:'',
host:'',
},
'': {
changeOrigin:true,
target:'',
host:'',
}
}
}
};
.babelrc?
在根目錄下建一個.babelrc柠新，這個文件是用來設(shè)置轉(zhuǎn)碼的規(guī)則和插件的，下面是配置信息
{
"presets":[
"react",
"es2015"
],
"env":{
// only enable it when process.env.NODE_ENV is 'development' or undefined
"development":{
"plugins":[["react-transform",{
"transforms":[{
"transform":"react-transform-hmr",
// if you use React Native, pass "react-native" instead:
"imports":["react"],
// this is important for Webpack HMR:
"locals":["module"]
}]
// note: you can put more transforms into array
// this is just one of them
}]]
}
}
}
postcss.config.js
同在在根目錄下建一個postcss.config.js辉巡，為樣式自動添加瀏覽器前綴
module.exports= {
plugins: [
require('autoprefixer')
]
}
開發(fā)
先說下項(xiàng)目結(jié)構(gòu)：app文件用來存放我們的項(xiàng)目恨憎，actions是放ajax請求的，asset存放靜態(tài)資源郊楣，components用來存放公用組件框咙，containers用來存放大組件，reducers是redux來處理數(shù)據(jù)的痢甘，main.jsx是入口文件喇嘱，plugin是用來擴(kuò)展插件的build存放模板文件，dist是打包輸出后的文件塞栅，webpack.config.js是開發(fā)模式的配置者铜，webpack.config.p.js是生產(chǎn)模式的配置
