初始化准备
版本号
webpack -V
4.8.3
webpack-cli -V
2.1.4
提前要全局安装node.js
mkdir <项目名称>
cd <项目名称>
npm init //初始化一个package.json文件
npm i -D webpack webpack-cli //在项目中安装webpack和webpack-cli
webpack -V //检查webpack的版本
webpack-cli -V // 检查webpack-cli的版本
注意:安装工具之类的最好使用-d安装在开发环境
安装es6编译组件
用命令安装babel-loader
npm i --save-dev babel-loader @babel/core @babel/preset-env
目前文件目录
webpack-test
|-/config
webpack-config.js
|-dist
index.html
|-src
index.js
package.json
|-node_modules
定义打包的入口与出
在webpack.config.js中配置打包的出口与入口
const path = require('path')
module.exports = {
entry:'../src/index.js',
output:{
filename:'index.js',
path:path.resolve(__dirname,'dist')
}
添加编译es6的处理规则
在webpack.config.js中添加规则
const path = require('path')
module.exports = {
entry:'../src/index.js',
output:{
filename:'index.js',
path:path.resolve(__dirname,'dist')
},
module:{
rules:[
{
test:/\.js$/,//正则匹配所有以.js结尾的文件
loader:'babel-loader'
}
]
}
添加es6代码
在src文件夹下index.js中添加es6代码
class Class{
constructor() {
this.name = '小依依';
}
appendToBody(){
const p = document.createElement('p');
p.innerHTML = this.str;
document.body.appendChild(p);
}
}
const obj = new Class();
obj.appendToBody();
添加npm 脚本
在package.json中添加npm 脚本
{
"script":{
"test":"echo \"Error: no test specified\" && exit 1",
"build":"webpack"//添加此行,用npm run build命令代替webpack进行打包
}
}
在dist文件下的index.html中引入打包后新增的js文件 main.js
打开这个index.html,如果页面中显示相应的文字,就表示编译成功