Webpack搭建（一）:使用webpack编译es6代码

初始化准备

版本号

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，如果页面中显示相应的文字，就表示编译成功