1.运行npm init -y快速初始化项目
2.在项目根目录下创建src源代码目录和dist产品目录
3.在src目录下创建index.html
4.使用cnpm安装webpack,运行cnpm i webpack webpack-cli -D(全局运行npm i cnpm -g)
5.创建webpack.config.js文件,
//向外暴露一个打包的配置对象,因为webpack是基于node构建的,所以webpack支持所有node API和语法
module.exports={
mode: 'development', //开发环境 (production产品环境,要打包发布了)
//webpack4.x有一个很大的特性,就是约定大于配置,默认的打包入口路径是src 下面的index.js,不用写entry
}
//cnpm i webpack-dev-server -D //配置实时编译
在 package.jason中
“scripts”:{
“dev”:“ webpack-dev-server --open firefox --port 3000 --hot --host 127.0.0.1 ” //运行npm run dev
}
在index.html中
<script src='/main.js'></script> //这个main.js存储在内存之中
//cnpm i html-webpack-plugin -D //把页面生成到内存之中去
在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: 'development', //开发环境 (production产品环境,要打包发布了)
//webpack4.x有一个很大的特性,就是约定大于配置,默认的打包入口路径是src 下面的index.js,不用写entry
plugins: [
htmlPlugin
]
}
在index.html中
<script src='/main.js'></script> //这个main.js存储在内存之中
这句话就可以注释掉了
配置babel:
安装babel插件:
运行 cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
运行 cnpm i babel-preset-env babel-preset-stage-0 -D
安装能够识别转换jsx语法的包babel-preset-react -D
添加.babelrc配置文件
{
“presets”:["presets":["env","stage-0","react”],
“plugins”:["transform-runtime"]
}
添加babel-loader的配置项
module:{ //要打包的第三方模块
rules:[
{test: /\.js|jsx$/},use: 'babel-loader',exclude:/node_modules/}
]
}
export default{} //es6语法
import .. from '/......' //es6语法,node不支持,webpack自然也不支持