- 首先搭建簡單的webpack項(xiàng)目
// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: './src/index.js',
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: 'index.html'
})
],
devServer: {
contentBase: './dist'
},
output: {
filename: 'app.js',
path: path.resolve(__dirname, 'dist')
}
}
// 目錄結(jié)構(gòu)
react-webpack-deom
|- node_modules
|- src
|- index.js
index.html
package.json
webpack.config.js
- 處理react
// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: './src/index.js',
module: {
rules: [{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react']
}
}
}]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: 'index.html'
})
],
devServer: {
contentBase: './dist'
},
output: {
filename: 'app.js',
path: path.resolve(__dirname, 'dist')
}
}
- 需要安裝的模塊
// package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --open",
"build": "webpack"
},
"dependencies": {
"@babel/core": "^7.4.3",
"@babel/preset-env": "^7.4.3",
"babel-loader": "^8.0.5",
"react": "^16.8.6",
"react-dom": "^16.8.6"
},
"devDependencies": {
"@babel/preset-react": "^7.0.0",
"clean-webpack-plugin": "^2.0.1",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.30.0",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.3.1"
}
}
-github
webpack 和 babel官方文檔有些地方有必要好好看看
來了上海，遇到一些人、事，挺好，挺幸運(yùn)
console.log('hello life, hello shang hai, hello world, hello front-end, ...')
