首页 > Web开发 > 详细

webpack配置

时间:2017-06-06 11:38:24      阅读:450      评论:0      收藏:0      [点我收藏+]

1.webpack安装

安装命令:npm install webpack -g

查看:webpack -v

技术分享

技术分享

2.创建项目

进入项目文件夹,输入命令:npm init,一路回车

完成后会自动创建package.json文件

技术分享

3.正式使用webpack

 1.命令:$ webpack 入口文件) (编译后文件)

 2.$webpack编译

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

输入内容

module.exports = {
  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  }
}
技术分享
在终端输入$ webpack

 3.在package.json文件配置

技术分享

在终端输入$npm webpack //如果不是start,则为$npm run (名字)

3.实现自动更新

1.安装webpack-dev-server

安装命令:$npm install -g --save-dev webpack-dev-server  //-g 全局模式

在webpack.config.js文件添加代码

devServer: {
contentBase:__dirname+ "/public",//本地服务器所加载的页面所在的目录
inline: true//实时刷新
}

技术分享

2.运行webpack-dev-server

运行命令:$webpack-dev-server

 

webpack配置

原文:http://www.cnblogs.com/zzhbx/p/6950657.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!