一.工程目录搭建
1.npm init 初始化项目pakage.json文件
2.新建两个配置文件webpack.dev.config.js(开发环境配置文件)
webpack.pub.config.js(生产环境配置文件)
3.新建src文件夹作为开发工作目录 src下面新建index.html 及app.js
4.新建pub文件夹 作为生产环境目录 讲src下的index.html拷贝到pub下并引入bundle.js
5.安装依赖包
(1)npm install webpack –g //全局安装webpack
(2)npm install webpack –save-dev
(3)npm install webpack-dev-server –save-dev(监视文件变化自动打包代码)
6.写配置文件
var path = require('path');module.exports = { // js入口文件 entry:path.resolve(__dirname,'src/app.js'), // webpack编译后输出 output: { path: path.resolve(__dirname, 'pub'), filename: 'bundle.js', }, module: { loaders: [ ] }}
(1)package.json scripts下加入"dev":"webpack --config webpack.dev.config.js" 并运行npm run dev 将src下面的js文件打包到pub下。
(2)
二.官网demo跑起来