首页 > 代码库 > wepack学习（二）

wepack学习（二）

2024-09-17 08:55:13   215人阅读

loader的使用

loader：

在上一篇文章中，我们的两个js文件都是纯粹的js文件，webpack一般会和一些框架联合使用，以我正在学的react为例，我们需要打包js,css文件

技术分享

1，component里面只需要暴露一个集成的模块messageBoard这个文件，我们再main.js文件（wepack入口文件）里面引入这个文件使用

var React=require("react");var path=require("path")var ReactDOM=require("react-dom");var MessageBoard=require("../component/messageBoard");ReactDOM.render(<MessageBoard title="message"/>,      document.getElementById("container"))

2，利用webpack打包，在index.html文件中加载的是打包完的文件，bundle.js这个文件，配置webpack.config.js

var path=require("path");var ExtractTextPlugin = require("extract-text-webpack-plugin");module.exports={	entry:"./js/main.js",	output:{		path:path.join(__dirname,"js/build"),		filename:"bundle.js"	},	module: {	    loaders: [	      {test:/\.css$/,loader:"style-loader！css-loader"},	      {test: /\.js$/, loader: ‘jsx-loader‘}	    ]    }}

我们引入了module，loaders，当然首先要安装jsx-loader,style-loader,css-loader这三个依赖的模块,需要注意的是style-loader和css-loader顺序不能错

打包完的结果是js已经打包成bundle.js了，如果你需要引入样式表需要在main.js里面添加 require("../css/main.css");  ，然后css文件已经作为内部样式表通过，添加了<style>标签在DOM里面

wepack学习（二）


联系
我们