看了幾個React配合webpack的教程，大部分都因為版本問題過時了。終於找到了一個不錯的教程。記錄下其中的知識點。
首先萬分感謝這個教程的制作者。少走了許多彎路，正在學習webpack的小伙伴可以來看看，版本的坑暫時沒有！！！！ 2017_7_6又加了一個非常有用的教程
鏈接如下：webpack-react之webpack篇 --上
鏈接2如下: webpack+react
- 關於熱加載；webpack-dev-server的作用能夠保證實時刷新的作用，但它有兩種形式，一種是全體刷新，一種是局部刷新，（貌似所謂的熱替換直接的意思就是局部刷新？？）在很大的項目中，我們所希望的自然是局部刷新。而在 package.json中這樣配置.
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --devtool eval-source-map --progress --content-base ./build",
"build": "webpack"
}
之后當啟動服務器之后我們要在路徑中加上 localhost:xxxx/webpack-dev-server 其中xxxx為端口號，可選范圍內隨意。之后我們就可以通過谷歌的調試插件看到局部更新的效果了。
- webpack相關
- 關於改名，我們先把webpack.config.js改名成為webpack.dev.config.js，之后在命令行中輸入webpack.dev.config.js之后就可以用這個名字啟動了，不過此時用webpack已經無效了。
如果想要完全使用這個名字並且用webpack命令啟動的話，需要在npm里面的package.json中修改scripts，加入"webpack":"webpack --config webpack.config.js(這里的名字想怎么改就怎么改) --progress --display --colors" - 關於不確定的輸出文件名字，比如我們不使用bundle.js而使用
filename:'[name]-[chunkhash].js'，根據教程，使用html-webpack-plugin來達成我們的目的。
- 首先npm install html-webpack-plugin --save-dev
- 之后在webpack.config.js中引入
const htmlWebpackPlugin=require('html-webpack-plusin');，然后我們在output后面加上plugins；[new htmlWebpackPlugin()],之后可以發現我們的插件已經生效，html已經生成了引用。不過在這個時候，它是自動生成的html文件.
源代碼僅供參考： https://github.com/dirstart/webpack-learn/tree/for_blog_1/practice/two
如果我們繼續在其中添加
const path=require('path');
const htmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
entry:'./src/script/main.js',
output:{
// filename:'bundle.js',
filename:'[name]-[chunkhash].js',
path:path.resolve(__dirname,'./dist/js')
},
plugins:[
new htmlWebpackPlugin({
template:'index.html'
})
]
}
添加了template后的作用是，讓輸出的html以我們template上下文中html為藍本輸出index.html
3.webpack中添加loader的方法有三種，一種是直接在require中添加，比如
require('style-loader!css-loader!./style.css');webpack --module-bind 'css=style!css'這種方法是在命令行中添加- 寫在配置文件中
module:{
loaders:[{
test:/\.js$/,
loader:'babel-loader',
query:{
presets:["es2015"]
}
}]
}
另外，關於loader的串聯，我們在require文件中只要寫"!"就好了，但是我們在配置文件中的模塊中需要這樣寫
{
test:/\.css$/,
loader:["style-loader","css-loader"]
}
注意，模塊名要寫全，不能直接寫style，不然報警了
另外還有其他的寫法，下圖來自官方文檔==========》
{
module: {
loaders: [
{ test: /\.jade$/, loader: "jade" },
// => "jade" loader is used for ".jade" files
{ test: /\.css$/, loader: "style!css" },
// => "style" and "css" loader is used for ".css" files
// Alternative syntax:
{ test: /\.css$/, loaders: ["style", "css"] },
]
}
}
4.關於webpack是如何出html模板文件的呢？主要還是采用loader的機制。我通過下面幾張截圖來大概闡釋一下。同時我感覺這跟Vue，React等有相似的地方。
---首先，這是index.html里面的東西
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>
----這是app.js里面的構建，其實就是將我們的Layer掛載在div#app中
import Layer from './components/layer/layer.js';
import './css/common.css';
const App=function(){
var dom=document.getElementById('#app');
var layer=new Layer()
dom.innerHTML=layer.tpl;
}
new App();
-----這個是我們所掛載的東西
import tpl from './layer.html';
import './layer.less';
function layer(){
return {
name:'layer',
tpl:tpl
}
}
export default layer;
---之后采用html-loader來讀取這個文件。直接用html-loader這種情況是指不用任何模板的時候。
除此之外，還有使用其他模板來編譯html的，比如說ejs，pug(jade)
下圖文件為layer.tpl，當然，也可以取名為.ejs格式的，之后從js中import進去，用document.getElementById之后掛載上去
<div class="layer">
<div>this is <%= name %> layer</div>
<% for (var i=0;i<arr.length;i++){ %>
<%=arr[i]%>
<% } %>
</div>
在webpack的loader之中這樣寫
{
test:/\.tpl$/,
loader:'ejs-loader'
}
Babel相關
1.因為之前總是使用babel-core，babel-loader安裝，就會發現常常又少了東西.這個問題待更吧。
2.為什么babel打包的那么慢呢？問題出在loader上，因為loader是非常耗時的東西。我們可以通過過濾掉一些不用編譯的文件來提高速度。其實主要就是用include和exclude來包含或者排除范圍。示范如下：
module:{
loaders:[{
test:/\.js$/,
loader:'babel-loader',
exclude:/node_modules/,
query:{
presets:["es2015"]
}
}]
}
!!但是問題來了，其實這樣的速度提升並不明顯，用include才能明顯地提升速度
module:{
loaders:[{
test:/\.js$/,
loader:'babel-loader',
exclude:/node_modules/,
include:/src/,
query:{
presets:["es2015"]
}
}]
}
關於包含和排除的文件，也可以調用path的resolve來實現，當我們使用path.resolve(__dirname,'xx')的時候，我們可以發現，我們的速度變得更快了。
var path=require('path');
// var htmlWebpackPlugin=require('html-webpack-plugin');
// console.log("現在的路徑是"+path.resolve(__dirname,'/the_last_webpack/app/'));
//如果是 path.resolve(__dirname,'/app/');
//它會輸入 ==> E:/app
module.exports={
entry:"./app/main.js",
output:{
path:path.resolve(__dirname,'./build/'),
filename:'bundle.js'
},
module:{
loaders:
[{
test:/\.html$/,
loader:'html-loader'
},{
test:/\.(js|jsx)$/,
loader:"babel-loader",
// exclude:path.resolve(__dirname,'/the_last_webpack/node_modules/'),
exclude:/node_modules/,
//我的上面和下面都是對的，再下方也是對的，但是，為什么path.resolve(__dirname,/app/)是錯的？
// include:/app/, 這樣也是對的
include:path.resolve(__dirname,'app'),
// include:path.resolve(__dirname,'/app/main.js'),
query:{
presets:["react","es2015"]
}
}]
}
// plugins:[
// new htmlWebpackPlugin({
// filename:'index.html',
// filename:'index.html'
// })
// ]
}