webpack打包项目流程

1.npm初始化管理

npm init -y

2.创建文件夹src和dist

3.在src下创建index.html和main.js

4.打包main.js文件

webpack  ./src/main.js -o ./dist/bundle.js

5.安装webpack-dev-server自动打包工具

cnpm i webpack-dev-server -D

6. webpack-dev-server依赖于本地安装webpack

cnpm i webpack -D

7.在项目根目录下新建webpack.config.js文件

8.配置webpack.config.js文件//

//node.js核心语法
var path = require('path')


//当命令运行webpack和webpack-dev-server时，工具会发现没有提供打包入口和出口，
//就会自动检查项目根目录下的这个配置文件，拿到下面的配置对象，然后根据这个对象来打包构建

module.exports = {
    entry:path.join(__dirname,'./src/main.js'), //入口文件
    output:{    //输出文件配置
        path:path.join(__dirname,'./dist'),   //输出路径
        filename:'bundle.js'    //输出文件名称
    }
} 

9.为了利用webpack-dev-server做到实时打包构建，在package.json中加入script脚本

"dev":"webpack-dev-server --open --port 3000 --contentBase src --hot",

10. 由于webpack-dev-server托管bundle.js至项目根路径(隐藏不可见),所以index.html无法调用到/dist/bundel.js,因此安装html-webpack-plugin插件

cnpm i html-webpack-plugin -D

作用：在内存中，根据指定的模板页面，生成一份内存中的首页，并自动把打包好的bundle.js导入到页面底部

11.在webpack.config.js中配置html-webpack-plugin插件

(1)声明plugin对象

var htmlwebpackplugin = require('html-webpack-plugin')

(2)在导出对象module.exports的plugins节点数组中配置

module.exports = {
    entry:path.join(__dirname,'./src/main.js'), //入口文件
    output:{    //输出文件配置
        path:path.join(__dirname,'./dist'),   //输出路径
        filename:'bundle.js'    //输出文件名称
    },
    plugins:[
        new htmlwebpackplugin({
            //指定复制的模板文件
            template:path.join(__dirname,'./src/index.html'),    
            filename:'index.html'   //设置生成的内存页面名称
        })
    ]
}