2018年1月3日
因为工作安排，最近在搞前端
目录结构
package.json
{ "name": "multientry", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1", "start": "webpack --colors" }, "author": "", "license": "ISC", "dependencies": { "react": "^16.2.0", "react-dom": "^16.2.0" }, "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-plugin-transform-react-jsx": "^6.24.1", "babel-preset-es2015": "^6.24.1", "clean-webpack-plugin": "^0.1.17", "html-webpack-plugin": "^2.30.1", "webpack": "^3.10.0" } }
webpack.config.js
var path = require("path"); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); module.exports = function () { let set = { entry: { a: './src/script/a.jsx', b: './src/script/b.jsx', c: './src/script/c.jsx', vendor: ['react', 'react-dom'] }, output: { path: path.resolve(__dirname, 'dist'),//输出的文件路径 filename: 'js/[name]-[chunkhash].js'//输出的js文件名 }, resolve: { extensions: ['.jsx', '.js', '.es6', 'json'] }, module: { rules: [ { test: /.jsx$/, use: 'babel-loader', include: path.resolve(__dirname, 'src/script') } ] }, plugins: [ new CleanWebpackPlugin(['dist']), new webpack.optimize.CommonsChunkPlugin({ name: 'vendor' }) ] } Object.keys(set.entry).forEach(v => { if (v !== 'main' && v !== 'index' && v !== 'vendor') { set.plugins.push( new HtmlWebpackPlugin({ filename: v + '.html',//输出的html路径 template: 'index.html', //html模板路径 //inject : 'head', // js 文件在 head 中，若为 body 或者 true 则在 body 中 inject: true, title: 'this is ' + v + '.html', chunks: ['vendor', v] // 要加入公共文件的引用，否则会报错 }) ) } }) return set; }
.bablerc
{ "plugins": [ "transform-react-jsx" ], "presets": [ "es2015" ] }
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> <%= htmlWebpackPlugin.options.title%> </title> </head> <body> <div id="app"></div> </body> </html>
a.jsx
import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('app') );