注意:为了方便解决权限问题,推荐在你项目托管目录里面进行权限设置
sudo chown -R
1.运行npm init -y
快速初始化一个项目,得到一个配置文件package.json。这是一个标准的npm说明文件,里面蕴含了丰富的信息,包括当前项目的依赖模块,自定义的脚本任务等等。
2. 在项目根目录创建文件夹src
源代码目录和dist
产品目录。
3. 在src
目录下创建首页index.html
。
4. 使用npm安装webpack,运行命令npm i webpack webpack-cli -D
,其中的参数i
是install
的缩写,-D
是--save-dev
的缩写,表示用于开发环境的包,发布后就会自动删除;与之对应的是-S
是--save
,表示用于开发和发布都需要的,在发布版本里面都需要。之后就可以在配置文件package.json里面看见增加了如下的配置信息:
“devDependencies”: {
“webpack”: “^4.16.5”,
“webpack-cli”: “^3.1.0”
}
注意:这里要先全局安装webpack, 运行指令是sudo npm install webpack -g 否则webpack打包会显示没有这个内部指令。
另外如果以上npm时失败或者提示modul里面没有相关模块则使用root权限安装全局。
5.对于webpack4.x版本新添加了默认的特性:
- 默认的打包入口是
src/index.js
- 默认的输出口是
dist/main.js
6.在4.x里面不需要设置脚本script进行命令,因为可以通过webpack-cli实现命令分离,即你只需要终端输入webpack就可以完成打包。这里我们还需要对webpack进行配置,配置文件为webpack.config.js
。
7.当我们每次修改了文件还需要再次在命令行里面进行webpack,这样相当麻烦,所以我们需要npm i webpack-dev-server
,相当于设置了一个本地服务器,然后在package.js
里面的script属性里设置:
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1”,
“dev”: “webpack-dev-server –mode development”
},
之后在终端里面输入npm run dev
然后就进入了服务器监控,只要我们再有修改并且保持,就会实时编译更新。注意,这里webpack-dev-server会将编译好的main.js
文件 托管在内存中的跟目录下,而不再是磁盘里的dist目录下,所以我们在目录里看不见,但是这样速度会提高,而且可以在html里面进行引入。
在上面我之所以会加上--mode development
是因为在之前的package.config.js设置里面的mode:development 没有效果.
8.通过npm i html-webpack-plugin -D
,这个命令也会将我们的index.html
托管到内存当中,而且还会自动添加我们编译完成后的main.js
的路径到html
文件里面。而且输入地址和端口号直接跳转到首页。
下载完成后我们还需要对webpack.config.js进行配置。
const path=require(‘path’)
const HtmlWebPackPlugin = require(‘html-webpack-plugin’)//导入 在内存当中自动生成index页面的插件
//创建一个插件的实例
const htmlPlugin = new HtmlWebPackPlugin({
template : path.join(__dirname,”./src/index.html”),//源文件
filename:”index.html” //生成到内存当中的首页的名字
})
//向外暴露一个打包的对象
module.exports={
mode:’production’ , //可选值有:production development
plugins:[
htmlPlugin
]
}
有了上面的配置,webpack基本配置完成,剩下的是关于react的配置。
通过npm i react react-dom -D
- react 是关于创建虚拟dom
- react-dom 是实现渲染
除了以上两个插件外,还需要babel的特别支持,babel有两个特点,能够将es6转换为es5,能够将jsx编译为符合js的语法。
其命令为npm i babel-core babel-plugin-transform-runtime -D
h和npm i babel-preset-env babel-preset-stage-0 babel-preset-react -D
和npm i babel-loder -S
之后再对模块的匹配进行指定:
完整的webpack.config.js代码:
const path=require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')//导入 在内存当中自动生成index页面的插件
//创建一个插件的实例
const htmlPlugin = new HtmlWebPackPlugin({
template : path.join(__dirname,"./src/index.html"),//源文件
filename:"index.html" //生成到内存当中的首页的名字
})
//向外暴露一个打包的对象
module.exports={
mode:'production' , //可选值有:production development
plugins:[
htmlPlugin
],
module:{
rules:[
{test:/\.(js|jsx)$/,use:'babel-loader',exclude:/node_modules/}
]
}
}
然后,还要在/src
目录下创建一个文件/src/.babelrc
,用来解释babel-loader.
{
"presets":["env","stage-0","react"],
"plugins":["transform-runtime"]
}
之后就可以顺利的解析渲染jsx语法了。