通过上一篇文章,我们成功建立了一个项目。接下来:
一、我们创建一个必须文件webpack.config.json,用来存放webpack的配置信息。另外我们建立一个index.js作为这个项目所需的js文件。(如果使用react或者其他框架的同志们,可以在该项目下通过 npm install react下载下来,随后引入即可);
二、(1)我们在index.js文件内写入简单的代码:
import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(
<div>Hello World!</div>,
document.querySelector('#container'),
)
(2)然后对webpack进行配置:
module.exports = {
//entry 入口文件 让webpack用哪个文件作为项目的入口
entry: {
index: './view/index.js',
},
//output 出口 让webpack把处理完成的文件放在哪里
output: {
path: __dirname+'/dist',
filename: '[name].js'
},
//时刻监听文件的更新
watch: true,
watchOptions: {
ignored: /node_modules/
},
//module 模块 要用什么不同的模块来处理各种类型的文件
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',//采用babel模块
exclude: /node_modules/,//忽略mode_modules的代码
query: {
presets: ['es2015','react']//解析es6和react语言
}
}
]
},
resolve: {
extensions: ['.coffee','.js']
},
};
(3)在运行webpack之前,要确保所需都都install了。比如我这边需要install的有:babel-loader、babel-core、babel-preset-es2015、babel-preset-react、react、react-dom等; 三、运行webpack,这时可以看到再dist文件夹那边已经生成了index.js文件,只需要在html文件中引入./dist/index.js文件即可。同时,我们在webpack.config.js里面的watch设置为了true,保证每次js修改,对应的dist里的js也相应更新