转自:https://blog.csdn.net/qq_35771567/article/details/83588854
准备
创建空项目文件夹。
建议安装cnpm,下文所有npm可以用cnpm代替
npm install -g cnpm --registry=https://registry.npm.taobao.org
初始化 npm 环境
npm init
一路回车即可
依赖安装
npm i webpack -D
npm i webpack-cli -D (因为webpak 到 4版本以上 就需要这个 ,不然会报错)
创建目录及配置文件
创建 src文件夹,src下创建webpack打包入口文件 index.js
创建webpack.config.js 并编写配置文件。
const path = require('path') // 引入‘path’,为了在这里使用绝对路径,避免相对路径在不同系统时出现不必要的问题
var webpack = require('webpack')
module.exports = {
// 应用入口
entry: {
app: path.join(__dirname, './src/index.js') // index.js作为打包的入口
},
// 输出目录
output: {
filename: 'build.js',
// filename: '[name].[hash:8].js', //name代表entry对应的名字; hash代表 整个app打包完成后根据内容加上hash。一旦整个文件内容变更,hash就会变化
path: path.join(__dirname, 'dist'), // 打包好之后的输出路径
},
}
修改package.json 下
在script中添加如下代码:
"build": "webpack --mode production"
执行 npm run build
就可以把src下面的index.js文件打包出来了,在dist文件夹可以看到打包文件
build.js最后可以看到写的内容
需要引入 babel-loader 来编译 es6
npm i babel-core babel-loader babel-preset-env -D
npm install babel babel-cli -D
npm install babel-preset-react babel-preset-es2015 -D
然后配置loader
const path = require('path') // 引入‘path’,为了在这里使用绝对路径,避免相对路径在不同系统时出现不必要的问题
var webpack = require('webpack')
module.exports = {
// 应用入口
entry: {
app: path.join(__dirname, './src/index.js') // index.js作为打包的入口
},
// 输出目录
output: {
filename: 'build.js',
// filename: '[name].[hash:8].js', //name代表entry对应的名字; hash代表 整个app打包完成后根据内容加上hash。一旦整个文件内容变更,hash就会变化
path: path.join(__dirname, 'dist'), // 打包好之后的输出路径
},
module: {
rules: [{
test: /\.(js|jsx)$/, //使用loader的目标文件。这里是.js
use: {
loader: 'babel-loader',
options: {
presets: ["env", "react"] //['@babel/preset-react']
},
},
exclude: [
path.join(__dirname, '../node_modules') // 由于node_modules都是编译过的文件,这里我们不让babel去处理其下面的js文件
]
}]
}
}
在项目根目录下创建 babel 的配置文件: .babelrc (前面有个点)
{
"presets": [
["es2015", {"loose": true}],
"react"
]
}
此时再执行 npm run build
可能报错,
原因是"babel-loader": "^8.x.x"版本的问题,与babel-core 6.x.x不兼容,把loader降到7.1.5版本即可解决:
npm i -D babel-loader@7.1.5
使用html模板
使用 html-webpack-plugin 插件,webpack 可以根据你的配置生成你想要的文件 html
npm i html-webpack-plugin -D
修改配置文件,添加plugins:
const HTMLPlugin = require('html-webpack-plugin')
······
······
plugins: [
new HTMLPlugin({
filename: 'distTemp.html', //制定的文件,默认
template: 'template.html' //制定html生成使用的模板文件
}) // 生成一个html页面,同时在webpack编译的时候。把我们所生成的entry都注入到这个html页面中,路径都是根据我们output配置的来走的。
]
创建html模板
再执行 npm run build
dist文件夹下就会多一个html文件
开发模式下启动服务器并实时刷新
npm i webpack-dev-server -D
在package.json中script中添加
"dev": "webpack-dev-server --mode development --open",
修改配置文件:
devServer.index一定要和HTMLPlugin.filename一致,否则报错
执行 npm run dev
就会自动打开浏览器了,页面就是模板页面
安装 react 模块npm i react -D
npm i react-dom -D
修改入口文件,编写react代码,
保存,运行npm run dev
最后推荐并致谢以下内容
webpack中文文档: https://www.webpackjs.com/concepts/
英文文档(推荐): https://webpack.js.org/concepts/
几本关于webpack的书:
1、 https://zhaoda.net/webpack-handbook/index.html
2、 http://webpack.wuhaolin.cn/
3、 https://fakefish.github.io/react-webpack-cookbook/Getting-started.html
第二本有弹出购买的遮罩层时,F12,干掉就行了