Webpack

下面webpack babel react 2018年最新最小化配置模板 package.js { "name": "{{NAME}}", "version": "1.0.0", "description": "{{DESCRIPTION}}", "main": "index.js", "scripts": { "start": "webpack-dev-server", "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "" }, "author": "", "license": "LexisNexis", "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-env": "^1.6.1", "babel-preset-react": "^6.24.1", "html-webpack-plugin": "^2.30.1", "path": "^0.12.7", "webpack": "^3.11.0", "webpack-dev-server": "^2.11.1" }, "dependencies": { "react": "^16.2.0", "react-dom": "^16.2.0" } } webpack.config.js const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({ template: './client/index.html', filename: 'index.html', inject: 'body' }); module.exports = { entry: './client/index.jsx', output: { path: path.resolve('dist'), filename: 'app.js' }, module: { loaders: [ { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ } ] }, plugins: [HtmlWebpackPluginConfig] }; .babelrc ...

QQ: 380800878, 微信: kittenll 最近自己在做一些项目的时候使用Restful和react来做到前后端分离，感受到开发效率的成倍提升，故在此分享一下前端使用webpack作为前端的构建工具。 Webpack是一个前端资源加载，编译，打包工具，可以把多个分散的功能模块javascript, css打包压缩到一个模块当中；合并图片。Webpack使用使用各种的loader来加载编译对应的资源，在网上也有非常多的loader。 0、安装全局安装： npm install webpack -g 还有一个开发者工具，此工具非常实用，后面介绍： npm install webpack-dev-server -g 也可以使用本地模式随源码一起发行： npm init npm install webpack --save-dev npm install webpack-dev-server --save-dev 随源码一起发行的好处就是不需要别人也强制全局安装，别人拿到源码后直接npm update后即可使用 1、简单使用在介绍使用配置文件之前，先来看一下官方给出的最简单的编译例子：新建一个目录hello，进行到hello目录，新建一个javascript文件entry.js，内容如下： document.write("It works."); 然后新建一个index.html文件，内容如下： <html> <head> <meta charset="utf-8"> </head> <body> <script type="text/javascript" src="bundle.js" charset="utf-8"></script> </body> </html> 编译entry.js到bundle.js： webpack ./entry.js bundle.js 如果正常编译通过，你会看到如下的输出（这是我自己的输出，你的输出可能会不太一样）： Hash: a41c6217554e666594cb Version: webpack 1.13.1 Time: 67ms Asset Size Chunks Chunk Names bundle.js 1.42 kB 0 [emitted] main [0] ./entry.js 29 bytes {0} [built] 使用浏览器打开index.html，你将会看到网页上呈现It works. ...

Webpack

react初始配置

Webpack之Hello World