Webpack—打包步骤

Webpack—打包步骤

1、安装nodejs

2、初始化init文件: npm init -y 
	 直接安装init 不需要一路回车
	  完成之后出现package.json文件

3、	创建src文件夹
	写一个index.html，写上html布局
	写需要使用的js方法，css样式图片等。。。例如header.js cont.js footer.js 
	写一个main.js， 在main.js中引入要引入的文件图片各种东西 挂载dom节点
	一般我们把footer.js、 header.js 、main.js 等文件都称为源代码，一般放入src文件中
	
4、新建webpack.config.js并配置： 文件名以及出入口文件
const path = require('path');
module.exports = {
    mode: 'production', // 压缩
    entry: './src/main.js', 
    output: { 
        filename: 'main.js',  // 文件名
        path: path.resolve(__dirname, 'dist')  // 路径，打包后的文件放在dist（自动创建）文件夹中
    }
}
	
5、安装webpack webpack-cli脚手架: cnpm webpack webpack-cli -D
	完成之后出现node_modules文件
	并且在package.json文件出现
	"devDependencies": {
  	"webpack": "^4.39.3",
  	"webpack-cli": "^3.3.7"
	}
    -D当前项目下安装，不能安装全局
	 -g全局安装，默认是4.0.0，项目所用版本不同造成冲突，不推荐

6、安装完成webpack 和 webpack-cli之后才能安装各种loader并且在webpack.config.js进行配置

7、package.json指令配置: 
	"main": "main.js", // 入口文件是main.js也就是打包后引用的js文件
	"build": "webpack" 之后就可以用npm run build打包了

8、执行命令：npm run build
	
9、出现dist文件夹，把src中的index.html放入dist并且引入main.js
    必须把index.html放进dist不然不生效