Home > Developer > Web Develop
Turn:
Using Webpack for ES6 development Some digressionThe original intention of using Webpack is actually to use React.
When learning React, there is always a problem: Since the component is modular, such as a jsx file corresponding to a component, this file contains the HTML and JS of this component, but where should his style be written? The online tutorials are written in the Jsx file, defined by variables, or written directly into the global style. It is not possible to define pseudo-elements through variable write, and it is uncomfortable to write a bunch of styles in JS, but it is not fit for the concept of assembly in the global.
Check the data when found a CSS modules concept, detailed can refer to this article. Of course, CSS does not natively support this concept, but in Webpack, it css-loader can be easily used by one. webpack+Reactalso very popular, so I began to learn webpack.
Simply create the directory structure as follows:
/es6-- main.js-- Person.jsindex.htmlwebpack.config.js
Es6 inside the store is the ES6 style code, main.js is the entry file, index.html is the home page, webpack.config.js is the Webpack configuration file.
The first thing is to ensure that Nodejs is installed and then installed with NPM:
Third, the configurationnpm install webpack -g
Open webpack.config.js , edit as follows:
var path = require(‘path‘);module.exports = { entry: "./es6/main.js", output: { path: __dirname, filename: "bundle.js" }, module: { loaders: [ { test: path.join(__dirname, ‘es6‘), loader: ‘babel-loader‘, query: { presets: [‘es2015‘] } } ] }}
module.exportsThe exported object is the Webpack configuration object, where:
entryIt's a portal file.
outputis the output file, which filename is given here bundle.js , that is, when Webpack runs out, it will generate a bundle.js file
loadersis used to all the loaders, in the gulp we are using some of the gulp plug-ins such as, and gulp-rename gulp-concat so on, similar in Webpack, using a variety of loaders , detailed loaders list here.
The meaning of more configuration properties is here.
Here we use a called babel-loader loader, in the use of Gulp for ES6 development has been introduced, we are using Babel to ES6 style code to convert, so in query also used the es2015 transcoding rules. This loader is installed below.
Install transcoding rulesnpm install babel-loader --save-dev
npm install babel-preset-es2015 --save-dev
Now that the preparation is done, you can write your code below.
Five, Code/es6/main.js/es6/person.jsimport Person from ‘./Person.js‘;let p = new Person(‘张三‘, 20);document.write(p.say());
Index.htmlclass Person{ constructor(name, age){ this.name = name; this.age = age; } say(){ return `我是${this.name},我今年${this.age}岁了。`; }}export default Person;
Here you can refer directly to it bundle.js .
<! DOCTYPE html><html><head> <meta charset="UTF-8" > <title>document </title></head><body> <script src="Bundle.js" ></script></body></html> Because there is a webpack.config.js configuration file, so only need to enter Webpack to run, Webpack will automatically execute the contents of the configuration file:
webpack
For large projects, it is possible that Webpack will run for a long time, so you can add a progress bar for easy viewing:
webpack --progress --colors
In gulp, watch can be used to monitor file changes, while in Webpack, you only need to add one parameter:
webpack --watch
So, we can use the following command to run:
webpack --progress --colors --watch
Using Webpack for ES6 development
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
