webpack1

想要入门webpack，先检查自己有没有安装node，node -v

打开命令行，执行 npm init -y 生成package.json文件，这个文件是对npm包进行管理的

 第三安装webpack，执行npm install webpack webpack-cli --save-dev

第四，打开webpack2，新建src，在src下新建index.js，在里面随便写点东西，里面可以写es6语法的内容

const a = '小鲤鱼'
console.log(a)

第五，创建webpack.config.js文件，这是配置文件，配置webpack从哪个文件开始打包（入口），要把打包好的文件放到哪里去（出口）

const path = require('path')
module.exports = {
	mode: 'development',
	//让webpack从index.js这个文件开始打包
	entry: path.join(__dirname,'src','index.js'),
	//告诉webpack打包好的文件放到哪里
	output: {
		path: path.join(__dirname,'dist'),
		filename: 'bundle.js'
	}
}

 第六，要在package.json文件中加一行脚本build

 

第七，终端执行npm run build

第八，生成bundle.js文件，这就是打包后的文件，创建一个index.html，引入bundle.js，就可以看到'小鲤鱼'这个字符串了

 

所以webpack的入门就到这里了，它有什么用呢，他方便了我们开发，让程序员可以使用最新的语法比如es6，webpack帮我们打包，打包成浏览器认可能够读取的bundle.js文件