首页 > 代码库 > 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高速打包、热部署服务器