webpack配置

对于现在的单页应用，几乎所有的前端应用都是用webpack打包。官方给的webpack的解释也是相当的准确：webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

 

基本配置项：

1、entry: 配置程序的入口文件，可以是字符串或对象

//单，多入口配置

entry: {

app: './src/main.js',

app2: 'src/main2.js'

}

2、output:文件的输出配置，配置输出的文件名，输出的文件路径，引用的路径

output: {

     filename: [name].js, //name变量为入口文件中配置的键名

     path: path.resolve(__dirname+ './dist'), //打包后文件输出的路径

     publicPath: '/', //插入到html中引用js资源的路径

     chunkFilename: '[id].[chunkHash].js' //entry中没有列出，却需要加载的js模块

}

3、module:webpack的核心配置模块，配置不同文件类型的加载器，从而将模块文件合并打包。其中rules是定义规则数组

module: {

　　rules:[

　　{

　　　　test: '/\.vue$/', //test为匹配要进行loader的文件类型，

　　　　include: [path.resolve(__dirname+'../src')],//哪些目录下的vue文件要被转

　　　　exclude: []/'',//哪些目录下的文件不需要转

　　　　use: [

　　　　　　{loader: 'vue-loader', options: {}}

　　　　]

　　}

　　]

}

4、reslove: 配置webpack的解析方式，提高效率

resolve: {

　　root: '',//设置module解析的位置

　　extensions: ['.js', '.vue', '.json'] //模块加载时可以省略的后缀名

　　alias: {

　　　　'@': path.resolve(__diranme, './src') //在导入的文件中@符号代表解析的长路径

　　}

}

5、devtool: //控制生成source map以及如何生成source map

例如：

devtool: 'cheap-eval-source-map'

 

6、devServer 开发环境配置webpack-dev-server

devServer: {

　　clientLogLevel: 'warn', //开发工具控制台显示消息

　　hot: true, //支持热加载

　　open: true, //编译好自动打开浏览器

　　compress: true, //是否开启压缩

　　proxy: {} //代理配置

　　//等等

}

7、plugins 配置webpack的插件

比较常用的：

html-webpack-plugin 可以指定网页的装饰器模板或者生成模板

webpack.ProvidePlugin 可以将第三方模块加载到全局

CommonsChunkPlugin 将项目中的公共模块合并打包，减少文件体积

extract-text-webpack-plugin

它会将所有的入口 chunk(entry chunks)中引用的css文件，移动到独立分离的 CSS 文件。因此，你的样式将不再内嵌到 JS bundle 中，而是会放到一个单独的 CSS 文件（即 style.css）当中。 如果你的样式文件大小较大，这会做更快提前加载，因为 CSS bundle 会跟 JS bundle 并行加载。

uglifyjs-webpack-plugin 代码压缩插件

 

这些都是基本的配置项，配置这些基本上能够满足大多数的开发需求。