Webpack热加载和React（其中有关于include和exclude的路径问题）

时间 2019-11-16

标签 webpack 加载 react 其中关于 include exclude 路径问题栏目 React 繁體版

原文原文链接

看了几个React配合webpack的教程，大部分都由于版本问题过期了。终于找到了一个不错的教程。记录下其中的知识点。

首先万分感谢这个教程的制做者。少走了许多弯路，正在学习webpack的小伙伴能够来看看，版本的坑暂时没有！！！！ 2017_7_6又加了一个很是有用的教程javascript

连接以下：webpack-react之webpack篇 --上
连接2以下: webpack+reactcss

关于热加载；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为端口号，可选范围内随意。以后咱们就能够经过谷歌的调试插件看到局部更新的效果了。html

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.htmljava

3.webpack中添加loader的方法有三种，一种是直接在require中添加，好比node

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文件中只要写"!"就行了，可是咱们在配置文件中的模块中须要这样写react

{
            test:/\.css$/,
            loader:["style-loader","css-loader"]
        }

注意，模块名要写全，不能直接写style，否则报警了
另外还有其余的写法，下图来自官方文档==========》webpack

{
    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里面的东西git

<!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中github

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();

-----这个是咱们所挂载的东西web

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'
    //  })
    // ]
}