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

最新推荐文章于 2024-05-24 20:15:02 发布

weixin_30875157

最新推荐文章于 2024-05-24 20:15:02 发布

阅读量667

点赞数

文章标签： javascript webpack ViewUI

原文链接：http://www.cnblogs.com/can-i-do/p/7097551.html

版权

看了几个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'
    //  })
    // ]
}

转载于:https://www.cnblogs.com/can-i-do/p/7097551.html