react and webpack配置
阿新 • • 發佈:2018-11-20
原始碼 連結:https://pan.baidu.com/s/1BruNhJhP_Zbw9BPahSXqRw 密碼:8mjs
webpack.config.js
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './main.js', output: { filename: 'build.js', path: path.resolve(__dirname, 'dist') }, plugins: [ //打包html new HtmlWebpackPlugin({ title: 'Output Management', template: './source.html' }), ], //引第三方外掛 externals: { jquery: 'jQuery', react: 'React', reactDom: 'ReactDOM' }, //除錯工具 devtool: 'inline-source-map', module: { rules: [{ //相容jsx語法 test: /\.js?$/, use: { loader: 'babel-loader', options: { presets: ['@babel/react'] } } }] } };
package.json
{ "private": true, "scripts": { "build": "webpack" }, "dependencies": { "@babel/core": "^7.1.0", "@babel/preset-react": "^7.0.0", "babel-loader": "^8.0.2", "bootstrap": "^3.3.7", "bootstrap-datetime-picker": "^2.4.4", "jquery": "^3.3.1", "react": "^16.5.0", "react-dom": "^16.5.0" }, "devDependencies": { "html-webpack-plugin": "^3.2.0", "webpack": "^4.20.2", "webpack-cli": "^3.1.1" } }