Webpack简易入门教程
Posted Skura
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Webpack简易入门教程相关的知识，希望对你有一定的参考价值。
<!-- 其实网上关于webpack的教程已经很多了，但是本人在学习过程中发现很多教程有错误，或者写的很不全面，结果做的过程出现各种各样的问题，对新手不但不友好还会让人浪费很多不必要的时间。所以决定自己做个简易教程，这个教程也没有写太深入，面向的是纯新手，但按这个教程大家能快速搭建自己的webpack，方便大家为后面的学习做准备 -->
github地址 https://github.com/Skura23/simple-webpack-test/tree/master
项目结构
--your project
|--prod
|--components
|--first.js
|--index.js
|--build
|--index.html
|--bundle.js
用npm安装依赖
npm init ，填写信息默认即可
npm install react --save-dev 安装react
npm install react-dom --save-dev （或者 npm i react-dom） 安装react-dom
npm install webpack --save-dev 安装webpack
npm install babel-loader --save-dev 安装babelReact
npm install jsx-loader --save-dev 安装jsx-loader将JSX语法转为js语句
创建webpack.config.js
var path=require(‘path‘);
module.exports={
entry:path.resolve(__dirname,‘./prod/index.js‘),
output:{
path:path.resolve(__dirname,‘./build‘),
filename:‘bundle.js‘,
},
module: {
loaders: [{
test: /\.js$/,
loader: ‘babel!jsx‘,
exclude: /node_modules/ ,
presets: [‘es2015‘, ‘react‘]
}]
}
}
entry：指入口文件的配置项
output：配置打包结果，path定义了输出的文件夹，filename则定义了打包结果文件的名称
module：定义了对模块的处理逻辑，这里可以用loaders定义了一系列的加载器，以及一些正则。当需要加载的文件匹配test的正则时，就会调用后面的loader对文件进行处理，这正是webpack强大的原因。
接着配置index.js
var React = require(‘react‘);
var ReactDOM = require(‘react-dom‘);
var AppComponent = require(‘./components/first.js‘);
ReactDOM.render(<AppComponent />, document.getElementById(‘content‘));
再配置first.js（这个是自定义组件）
var React = require(‘react‘);
var ReactDOM = require(‘react-dom‘);
var FirstComp = React.createClass({
render: function () {
return (
<div className="firstComp">
Hello World!
</div>
);
}
});
module.exports = FirstComp;
修改index.html以引入bundle.js，
bundle.js的生成位置在前面已经配置过了，所以我们只要在index.html里引入就可以了
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>React Test</title>
</head>
<body>
<div id="content"></div>
<script src="bundle.js"></script>
</body>
</html>
配置package.json
打开package.json，并找到scripts代码块
修改scripts为
"scripts": { "build": "webpack" }
并且执行：
npm run build
现在打开index.html，可以看见Hello world，说明我们使用webpack打包成功。
其实教程至此就完了，但后面你会发现每次更新文件后都要使用npm run build重新打包，费时费力，
接下来我们使用webpack-dev-server将项目运行在虚拟服务器上，我们可以在package.json文件内定义scripts，同时修改webpack的配置文件来达到文件修改能被监听，并自动刷新浏览器的效果！
配置webpack-dev-server
修改package.json为
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --hot --inline --devtool eval --progress --colors --content-base build"
},
webpack-dev-server: 在 localhost:8080 建立一个 Web 服务器
--devtool eval:为你的代码创建源地址。
--progress: 显示合并代码进度
--colors: 在命令行中显示颜色
--content-base build:指向设置的输出目录
并且在index.html里加入：
<script src="http://localhost:8080/webpack-dev-server.js"></script>
修改webpack.config.js :
var path = require(‘path‘);
module.exports = {
entry: [‘webpack/hot/dev-server‘, path.resolve(__dirname, ‘./prod/index.js‘)],
output: {
path: path.resolve(__dirname, ‘./build‘),
filename: ‘bundle.js‘,
}
};
npm run dev
，打开http://localhost:8080，修改文件后保存，浏览器可自动刷新内容
github地址 https://github.com/Skura23/simple-webpack-test/tree/master
以上是关于Webpack简易入门教程的主要内容，如果未能解决你的问题，请参考以下文章
webpack原理篇（五十八）：实战开发一个简易的webpack