• 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相关
    1. 关于改名,我们先把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"
    2. 关于不确定的输出文件名字,比如我们不使用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'
    	// 	})
    	// ]
    }
    
  • 相关阅读:
    如何查看微信公众号的历史文章(微信订阅号查看历史消息)
    微信服务号有福啦 每月可以微信群发4次
    欲提高微信图文转化率 需学点如何吊胃口
    只需按一下空格键就可以标注 不用众里寻他千百度
    如何让你的微信图文转化率达到300%
    是智能手机推动windows xp系统停止服务吗
    响应式js幻灯片代码一枚
    微信公众平台回复链接可以直接访问,但不能是锚文字链接<a>标签
    如何用腾讯电脑管家备份微信聊天记录
    android版微信5.2.1更新 支持微信聊天记录备份到电脑上
  • 原文地址:https://www.cnblogs.com/can-i-do/p/7097551.html
Copyright © 2020-2023  润新知