webpack学习（一）

记录学习webpack过程中，配置文件中一些需要注意的点。

一、

entry，入口文件。

单入口文件：

entry: __dirname + '/app',  // __dirname 为一个全局对象，代表当前目录

多入口文件：

//json格式
entry:{
        come:'./app/index.js',
        out:'./app/out.js'
    }

//json格式写法下，最后打包后会生成2个入口文件，比如：come.bundle.js和out.bundle.js

//数组格式
entry:['./app/index.js','./app/out.js']

//数组格式写法下，最后打包后，只会打包成一个入口文件，比如：main.bundle.js

二、

output，输出文件。

output中的filename在单入口中，可以直接写成：

filename:'bundle.js'

多入口情况下，可添加[name]-[hash]来生成：

filename:'[name]-[hash].bundle.js'

三、

module。

主要是各种加载器loaders。

css：

{test: /\.css$/, loader: 'style-loader!css-loader'},

在css中，style与css这两个loader不能调换位置，loader由右向左执行。先css后再style。

四、

plugins，插件。

①html-webpack-plugin

自动根据我们书写的配置文件，生成相关的html代码，并引入入口文件。

//下载
npm install --save-dev html-webpack-plugin
//在webpack.config.js中配置
var HtmlwebpackPlugin = require('html-webpack-plugin');
new HtmlwebpackPlugin()

②webpack-dev-server

在服务器环境下，文件更改时可自动刷新。

//下载
npm install --save-dev webpack-dev-server
//配置

  devServer: {
      historyApiFallback: true,  //不跳转
      hot: true,  
      inline: true,  //实时刷新
      port: 3306   //更改端口，默认8080
   }

③内置插件webpack.BannerPlugin() 和 webpack.optimize.UglifyJsPlugin()

这两个插件无需手动下载，webpack内置插件。

//plugins引入
//作用：添加注释及一些版权信息
new webpack.BannerPlugin('This file is created by hcy')

//压缩最后生成的入口文件js
new webpack.optimize.UglifyJsPlugin()