Webpack热加载和React（其中有关于include和exclude的路径问题）
看了几个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'
// })
// ]
}
