首页 > 代码库 > webpack-dev-server轻量级js高速打包、热部署服务器
webpack-dev-server轻量级js高速打包、热部署服务器
webpack是一个打包web项目的工具 ,可以实现css,js,less,cass,html的混淆加密,minify,结合webpack-dev-server热部署,非常方便前端页面和Nodejs的开发。
webpack
安装方法
npm install webpack --save-dev
npm install webpack-dev-server --save-dev
执行webpack需要在项目目录有一个配置文件 webpack.config.js 。
var webpack = require(‘webpack‘); module.exports = { entry:{ index:‘./src/index.js‘, vendor: [ ‘react‘, ‘react-dom‘, ‘react-redux‘ ]}, output:{ path:‘./bin‘, filename:‘app.bundle.js‘, publicPath:‘/bin‘ }, module:{ loaders:[{ test:/\.js$/, exclude:/node_modules/, loader:‘babel‘, query: { presets: [‘es2015‘, ‘stage-0‘, ‘react‘] } }] }, plugins: [ new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js") ] }
上面的 entry 表示入口文件,webpack会自动关联出此js文件引用的其他js文件。可以设置为一个数组,表示多个入口。
自己写的代码打包存放的位置在output中指定了相对路径./bin/app.bundle.js。
vendor 指出其中使用的第三方js,
便于下方plugins使用CommonsChunkPlugin把自己编写的代码和第三方代码分开,此插件构造函数中指定了是哪个vendor,以及处理后的保存位置。
modules 中的配置的loaders用于执行顺序从右到左,类似管道依次处理test参数匹配到的js文件、css文件。
webpack好用的的参数
-p 或者 --optimize-minimize 实现去空格压缩
-d 生成js.map文件,便于对应源码位置
-- hot 启用热部署,不用刷新网页
--watch 观察文件变化自动重新webpack ,启动webpack-dev-server时不使用这个参数也可以自动触发webpack
webpack-dev-server轻量级js高速打包、热部署服务器
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。