webpack
*?模塊打包器：
* 分析項目結構找到javascript模塊或其他瀏覽器不能直接運行的擴展語言（scss烫饼，typescripts等），打包為合適的格式以供瀏覽器使用
*?webpack和grunt诗舰、gulp相比有什么特性？训裆！
*?grunt眶根、gulp：前端流程化工具
*?webpack：一種模式化的解決工具
*?grunt、gulp：在一個配置文件中边琉，指明對某種類型的文件進行編譯属百、組合、壓縮等處理变姨，這個工具可以自動為你完成這些任務
*?webpack：把項目當初一個整體族扰，通過給定的入口文件（如index.js），webpack會從這個文件開始找到項目里的所有依賴文件，使用loaders處理它們渔呵，最終打包成瀏覽器可以處理的js文件
*?一個實例：（做same防站的時候配置的webpack.config.js）
var?path?=?require("path");
var?webpack?=?require("webpack");
var?HtmlwebpackPlugin?=?require("html-webpack-plugin");
//?一些常用路由
/***
*?path.resolve([from...],?to)
*?form:?原路徑怒竿，
*?to:???將被解析到絕對路徑的字符串
*/
const?ROOT_PATH?=?path.resolve(__dirname);
const?APP_PATH?=?path.resolve(ROOT_PATH,?"app");
const?BUILD_PATH?=?path.resolve(ROOT_PATH,?"build");
module.exports?=?{
entry:?path.resolve(APP_PATH,?"index.jsx"),
output:?{
path:?BUILD_PATH,
filename:?"bundle.js",
},
//?開啟webpack?source?map
devtool:?"eval-source-map",
//?開啟webpack?dev?server
devServer:?{
contentBase:?"./build",
historyApiFallback:?true,
hot:?true,//熱模塊替換
inline:?true,//?源文件改變時自動刷新頁面
port:?8080,
//?progress:?true
},
//?配置plugin
plugins:?[
//?熱加載：?修改代碼自動刷新瀏覽器
new?webpack.HotModuleReplacementPlugin(),
//?生成h5文件
//?new?HtmlwebpackPlugin({
//??title:?"SAME"
//?})
],
module:?{
//?配置?preLoaders,?將eslint?添加進入
//?preloaders:?[],
//?配置loader,?將Babel?添加進去
//?loaders:?[{
//?????test:?/\.jsx?$/,
//?????loader:?"babel-loader",
//?????exclude:?"node_modules",
//?????include:?APP_PATH
//?},?{
//?????test:?/\.less/,
//?????exclude:?"node_modules",
//?????include:?APP_PATH,
//?????loader:?"style!css!autoprefixer!less",
//?????//?loaders:?["style",?"css",?"autoprefixer",?"less"]
//?},?]
rules:?[{
test:?/\.less$/,
use:?[
"style-loader",
"css-loader",
"autoprefixer-loader",
"less-loader"
]
},?{
test:?/\.css$/,
use:?[
"style-loader",
"css-loader",
"autoprefixer-loader"
]
},?{
test:?/\.jsx$/,
loader:?"babel-loader"
}]
}
}
* css-loader：使你能夠使用@import耕驰，url（...）的方式引入css文件录豺，style－loaders：使用將所有計算的樣式加入頁面
*?感嘆號的作用：?同一個文件能夠使用不同類型的loader
