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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。