前提
首先保证node版本大于4.0
构建一个空目录
无webpack.config.js打包
webpack4.x项目是以根目录下的'./src/index.js'作为入口
- 1、快速构建项目
npm init -y - 2、安装webpack
npm i webpack webpack-cli --save-dev - 3、package.json 更改为
"scripts" : {
"build":"webpack"
}
- 4 创建
./src/index.js文件，增加内容
console.log('一切从这里开始')
在终端执行npm run build,目录下就会多了一个dist文件件，这就是webpack打包的结果
- 5 修改
package.json文件的scripts
"scripts": {
"start": "webpack --mode development",
"build": "webpack --mode production"
},
分别执行两个操作，你会发现main.js不同的变化。production模式下，默认对打包的文件压缩，打包更小。production模式下，对打包的文件不压缩，同时打包的速度更快，webpack更新的优点就在这里。
如果没有指定任何模式，默认为production模式。
安装依赖
- 1、安装依赖包
npm i babel-core babel-loader babel-preset-env react react-dom babel-preset-react --save-dev - 2、新建
babelrc文件，进行相关配置
{
"presets": ["env","react"],
}
- 3、新建
webpack.config.js文件，进行配置
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
- 4、修改index.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<div>Hello world</div>,
document.getElementById("app")
);
执行终端
- 5、使用
html-webpack-plugin对html打包。安装依赖：
npm i html-webapck-plugin html-load --save-dev
新建./src/index.html文件
<html lang="en">
<head>
<meta charset="utf-8">
<title>webpack4入门</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>
修改webpack.config.js配置
const path = require('path')
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};
执行命令行，可以在dist看到html文件
- 6、
webpack-dev-server插件
npm i webpack-dev-server --save-dev
修改package.json和webpack.config.js文件
"scripts": {
"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"
},
const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports ={
module:{
rules:[
{
test:/\.js$/,
exclude:/node_modules/,
use:{
loader:'babel-loader'
}
},
{
test:/\.html$/,
use:[{
loader:'html-loader',
options:{minimize:true}
}]
}
]
},
plugins:[
new HtmlWebPackPlugin({
template:'./src/index.html',
filename:'./index.html'
}),
],
devServer:{
contentBase:path.join(__dirname,"dist"),
compress:true,
port:8033,
host:'127.0.0.1',
}
};
- 7、
react-hot-loader插件
npm i react-hot-loader --save-dev
修改.babelrc和webpack.config.js文件
{
"presets": ["env","react"],
"plugins": ["react-hot-loader/babel"]
}
const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const webpack = require('webpack');
module.exports ={
module:{
rules:[
{
test:/\.js$/,
exclude:/node_modules/,
use:{
loader:'babel-loader'
}
},
{
test:/\.html$/,
use:[{
loader:'html-loader',
options:{minimize:true}
}]
}
]
},
plugins:[
new HtmlWebPackPlugin({
template:'./src/index.html',
filename:'./index.html'
}),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
],
devServer:{
contentBase:path.join(__dirname,"dist"),
compress:true,
port:8033,
host:'127.0.0.1',
hot:true
}
};
执行终端，npm run start便可以启动webpack-dev-server，修改app.js内容，就可以看到你修改的内容
