webpack基础之配置webpack.config.js

• 简介：

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。

webpack已经是大部分前端项目打包工具的首选，grunt、glup、browserify、fis等逐渐沦为辅助甚至完全被替代。

• 安装：

注册cnpm：

npm install -g cnpm --registry=https://registry.npm.taobao.org

全局安装npm install -g webpack

项目安装

cnpm init

cnpm install –save-dev webpack

 

• 使用：

1. 无配置文件使用：

webpack 源文件  目标文件

例：webpack  index.js  bound.js

1. 使用配置文件：

1. 默认配置文件:

webpack.config.js

1. 可以配置多个config文件

• webpack.config.js文件的配置

需要采用common.js规范进行文件的抛出一个webpack的配置对象：

module.exports={}

• 入口文件属性：

1. 字符串：

entry：__dirname+文件路径  //__dirname是node的全局文件根目录，推荐采用此种写法；

entry：./文件路径  //此种写法,貌似在3.0版本中不再支持，不推荐此种写法

1. 对象语法：

1. 单入口文件：

entry：{

main：__dirname+文件路径

}

1. 多入口文件：

entry：{

app1：__dirname+文件路径，

app2：__dirname+文件路径，

}

• 输出文件属性：

output：{

path: __dirname+文件路径  //__dirname是node的全局文件根目录，采用此种写法；

path：./文件路径  //此种写法不支持

filename：输出文件名  注：如果多入口文件，不能指定文件名，需要使用[name]动态获取；

chunkFilename:[name][hash] name为模块的名字，hash加入hash值，防止缓存，使用此属性是，模块的引入必须结合require.ensure方法，否则此方法无效；

chunkFilename: "[id][name][hash].js"

 

publicPath:设置服务路径

}

 

• 加载器：

1. 语法：

module: {

    rules: [

      {test: /\.css$/, use: [