Webpack Easy Start Tutorial

<!--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