webpack-2-基本配置
来源:互联网 发布:centos挂载硬盘分区 编辑:程序博客网 时间:2024/06/05 06:14
webpack 2 基本配置,DevServer 配置
说明
最近重构代码时,把 webpack 升级到了 2.2.1,结果完全无法运行,正好看到了这份文档,讲解的很详细,所以就学习了一下,应用到项目中。
webpack 开发跨域问题解决
列出版本
- “webpack”: “^2.2.1”,
- “webpack-dev-server”: “^2.4.1”,
- “webpack-md5-hash”: “0.0.5”,
- “webpack-merge”: “^4.0.0”
配置
1. 整体
webpack 配置文件就是 JavaScript 文件导出的一个对象,webpack 根据定义的属性来进行解析。
2. entry(入口)
入口文件告诉webpack 从哪里开始进入文件,顺着依赖关系打包文件,一般设置成应用的启动文件
entry 的值 可以是 string | Array 或者是一个对象,包含入口文件的路径,或者模块名
一般写法
entry: { app: './src/app.js', vendors: './src/vendors.js'}
复杂一点的写法,分离应用程序和公共库
entry: { app: './app/js/index.js' vendor: ['react', 'react-router', 'redux', 'react-redux', 'react-dom'] },
3. output(出口)
webpack 打包文件后,还要告诉他,打包后的文件名变化,输出位置,注:可以有多个入口,但是出口配置只有一个
output 的值是一个对象,具有以下属性
output.path
对应文件打包后的输出目录,需要绝对路径,可使用 node.js path 模块
path.resolve([from...],to)
实现
output.filename
指定每个输出文件的文件名格式,如果配置了多个入口文件,或者拆分了模块,可以通过 [name]、[hash]或者[chunkhash] 替换相应的文件名。
output.chunkFilename
非入口模块 chunk 的文件名, 路径相对于 output.path 目录。同理,可以用 [id]、[name]、[hash]、[chunkhash],作为输出文件名设置
output.publicPath
最后转换为 html 引入的模块的 url 的前半部分,开发时 设置为 ‘/’ 就可以了,生产环境下要设置为产品上线时的地址 ‘http://xxx.xx’
例子
output: { path: path.resolve(__dirname, 'dev'), filename: 'js/bundle.js', publicPath: '/', chunkFilename: '[name].chunk.js' },
4. loader(加载器)
loaders 是将对应程序中的文件进行转换,然后返回新的文件,这样可以打包 JavaScript 之外的其他文件。
注意:webpack 1.x 中的 module.loaders 已经改成了 module.rules,写法上稍有不同
module.rules 允许你在 webpack 中指定几个 loader
module: { // loaders: [] // 2.x 兼容 rules: [ // rules 代替 loaders { test: /\.(scss|sass)$/, // test 定义文件匹配规则 include: APP_PATH, // 表示必须匹配选项 // exclude: 'node_modules' 表示必须不匹配选项 // enforce: 'pre'|'post' 表示 loader 的前置和后置 use: [ // use 代替 loaders 更加明确,以loaders 数组的形式展现 'style-loader', 'css-loader', 'postcss-loader', 'sass-loader?outputStyle=expanded' // ? 后边跟 loader 的配置选项,也可以使用 options ] }, { test: /\.css$/, use: [ { loader: 'style-loader'}, { loader: 'css-loader'}, options: { // 属性 跟 query 一样,可以传递到 loader 中,代表 loader 的选项 modules: true } } ] } ] }
5. resolve(解析)
用来设置模块如何被解析
resolve.alias
创建 import 或 require 的别名,来确保模块引入变得更简单。例如,一些常用模块:
resolve: { alias: { Request$: path.resolve(__dirname, 'app/js/request.js') } } // 使用前 import Request from 'app/js/request.js'; // 使用后 import Request from 'Request';
resolve.extensions
自动解析确定的扩展,能够使用户在引入时不带扩展
resolve: { extensions: ['.js', '.json', '.scss', 'css'] } // 使用后 import File from './app/js/utils/request';
resolve.modules
告诉 webpack 解析模块时,应该搜索的目录
resolve: { modules: [ path.resolve(__dirname, 'app'), 'node_modules' ] }
6. devtool(开发工具)
定义如何生成 Source Map
devtool: 'cheap-module-source-map'
跟多 Source Map 可以看官方文档
7. plugins(插件)
扩展功能
常用插件
html-webpack-plugin
按照模板生成 HTML,动态添加 js 和 css,(2.x没有变化)
webpack-merge
非插件,用于将两个 webpack 配置文件合并为一个,(2.x新增)
extract-text-webpack-plugin
抽取 CSS 模块 生成单独文件,(2.x写法有变化)
chunk-manifest-webpack-plugin
配合webpack.optimize.CommonsChunkPlugin
,将 manifest 提取到一个单独的json 文件中,解决长效缓存的问题
webpack-md5-hash
使生成的 hash 值 是基于文件内容的
webpack.optimize.CommonsChunkPlugin
用于提取公共模块,单独打包成一个文件,(2.x写法略有不同)
webpack.DefinePlugin
用于定义环境变量,(2.x没有变化)
webpack.LoaderOptionsPlugin
代替 1.x 版本中 loader 的扩展配置功能,(2.x新增)
webpack.optimize.UglifyJsPlugin
js 代码压缩,(2.x更改了默认配置)
webpack.HotModuleReplacementPlugin
开启全局的模块热替换(HMR)
webpack.NamedModulesPlugin
当模块热替换(HMR)时在浏览器控制台输出对用户更友好的模块名字信息
8. devServer
便于快速开发应用程序
devServer.contentBase
告诉服务器从哪里提供内容,默认情况下,将使用当前工作目录作为提供内容的目录
contentBase: path.resolve(__dirname, 'dev'),
devServer.publicPath
此路径下的打包文件可在浏览器中访问。注:确保 publicPath 总是以斜杠(/)开头和结尾。
在热模块替换中,必须设置此项,而且需要和 output.publicPath 一致
publicPath: '/',
devServer.historyApiFallback
react 项目开发,设置可以从任意的URL 访问
historyApiFallback: true,
devServer.clientLogLevel
减少控制台无用的信息打印
devServer.host|port
可以用来设置服务器外部可以访问的 ip 和 端口
devServer.open|hot|inline|compress
设置 打开一个新的浏览器窗口|启用 webpack 的模块热替换特性|启用内联模式|启用gzip压缩
devServer.stats
控制 bundle 信息展示,可以自定义展示规则,参考文档
下一篇 配置实例
- webpack-2-基本配置
- 二、webpack的基本配置(2)
- webpack的基本配置
- webpack基本配置
- webpack基本配置
- webpack基本配置
- webpack基本配置
- webpack react的基本配置
- webpack安装与基本配置
- webpack基本配置项总结
- webpack基本打包配置流程
- webpack实战——(2)基本配置
- 二、webpack的基本配置(1)
- webpack的基本配置项详解
- webpack基本配置及打包操作
- vue+webpack 组件化开发基本配置
- React系列学习笔记:1.React与webpack基本配置
- webpack配置
- VS2010-MFC获取某个树控件某个树节点下所有子节点的文本
- 常用内存数据库介绍
- leetcode 539. Minimum Time Difference
- Python库Numpy的argpartition函数浅析
- 两台虚拟机ping不通原因
- webpack-2-基本配置
- TensorFlow教程之深入MNIST测试
- ssh public key认证免密码登录
- Git远程操作详解
- HTTPS原理
- 机器学习笔记十三:Ensemble思想(上)
- resin的配置(如何通过浏览器访问发布到resin服务器的html文件)
- 算法-归并排序(Merge-Sort)
- Ubuntu下编译ffmpeg、SDL、SDL_net库