webpack的简单使用

1全局安装webpack： npm install webpack -g

2项目内安装webpack包： npm install webpack --save-dev

3添加一个package.json: npm init --yes

4添加一个配置文件webpack.config.js具体配置信息：中文文档，官网

然后写自己的代码

生成最终运行文件：webpack-p

 

5浏览器实时刷新 使用webpack-dev-server

全局安装：npm install webpack-dev-server -g

webpack-dev-server --hot --inline 会在终端创建一个服务器

没有使用全局： npm install webpack-dev-server

在package.json内配置脚本信息 ‘名字’：‘ webpack-dev-server --hot --inline’

执行脚本 ：npm run 名字

在配置文件webpack.config.js内设置一个虚拟路径 publicPath配合webpack-dev-server使用，在html引入文件的那里把path的内容改成publicPath的内容

注：打开的时候用localhost：8080

6,监听css变化

下载css解析器（css-loader,style-loader）

中文文档：http://webpack.com/configuration.html

在外网上下不下来就用淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org

然后用cnpm代替npm

举个栗子：

webpack.config.js里面：

module.exports = {

entry: './index.js', //主程序的入口文件

// 打包以后的文件的路径 webpack -p 打包

output: {

path: "./dist/", // 路径

publicPath : "/abc/", //根目录 配合webpack-dev-server一块使用的

filename: 'bundle.js' //文件的名字

},

module:{

loaders:[{

test:/\.css$/,

loader:'style!css'

}]

}

}

 

html里面引入<script src="./abc/bundle.js"></script>

index.js：var com = require("./common.js");

require("./app.css");

引入js和css