<!--In fact, online about Webpack's tutorial has been many, but I found in the course of learning a lot of errors, or write is not comprehensive, the result of a variety of problems in the process, the novice not only unfriendly but also let people waste a lot of unnecessary time. So decided to do a simple tutorial, this tutorial is not written too deep, for the pure novice, but according to this tutorial we can quickly build their own webpack, easy for everyone to learn to prepare for the back- -
GitHub Address Https://github.com/Skura23/simple-webpack-test/tree/master
Project Structure
--your Project |--prod |--components |--first.js |--index.js |--build |--index.html |--bundle.js
installing dependencies with NPM
NPM Init, fill in the information by default
npm install react --save-dev 安装react
NPM Install React-dom--save-dev (or NPM i react-dom) installation React-dom
npm install webpack --save-dev 安装webpack
npm install babel-loader --save-dev 安装babelReact
NPM Install Jsx-loader--save-dev installation Jsx-loader convert JSX syntax to JS statement
Create 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
: Refers to the configuration entry for the portal file
output
: Configure the package result, path
define the output folder, filename defines the name of the package result file
module
: Defines the processing logic for the module, which can be used to loaders
define a series of loaders, as well as some regular. When a file that needs to be loaded matches the test's regular, it calls the loader
file to be processed later, which is webpack
a powerful reason.
Then configure Index.js
var React = require (' React ');
var reactdom = require (' react-dom ');
var AppComponent = require ('./components/first.js ');
Reactdom.render (<appcomponent/>, document.getElementById (' content '));
Reconfigure First.js (This is a custom component)
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;
Modify index.html to introduce Bundle.js,
The build location of the Bundle.js is already configured in the front, so we just need to introduce it in index.html.
<! DOCTYPE html>
Configure Package.json
Open Package.json and locate the scripts
code block
Modify Scripts to
"scripts": { "build": "webpack" }
and execute:
npm run build
Now open index.html, you can see Hello world, indicating that we use Webpack packaging success.
In fact, the tutorial is over, but later you will find that every time you update the file you have to use NPM run build to RePack,
Next we use Webpack-dev-server to run the project on the virtual server, we can define the scripts in the Package.json file, while modifying the Webpack configuration file to achieve the file modification can be monitored, and automatically refresh the browser effect!
Configure Webpack-dev-server
Modify Package.json to
"Scripts": { "build": "Webpack", "dev": "Webpack-dev-server--hot--inline--devtool eval--progress-- Colors--content-base Build " },
webpack-dev-server
: Build a Web server in localhost:8080
--devtool eval
: Create a source address for your code.
--progress
: Show Merge Code Progress
--colors
: Display colors on the command line
--content-base build
: Point to the output directory of the settings
and add in index.html:
<script src="http://localhost:8080/webpack-dev-server.js"></script>
Modify 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 Address Https://github.com/Skura23/simple-webpack-test/tree/master
Webpack Easy Start Tutorial