首先安装 webpack 和 webpack-dev-server
webpack-dev-server
用于架设服务, 并监听代码修改, 刷新修改后的结果
// 下面是关于 webpack-dev-server 的配置
contentBase, // 为文件提供本地服务器
port, // 监听端口, 默认 8080
inline, // 设置为 true, 源文件发生改变自动刷新页面
historyApiFallback // 依赖 html5 history API, 如果设置为 true, 所有的页面跳转指向 index.html
- devServer:{
- contentBase: './src' // 本地服务器所加载的页面所在的目录
- historyApiFallback: true, // 不跳转
- inline: true // 实时刷新
- }
然后我们在根目录下创建一个'webpack.config.js', 在'package.json'添加两个命令用于本地开发和生产发布
- "scripts": {
- "start": "webpack-dev-server",
- "build": "webpack"
- }
- entry
定义入口文件
- var baseConfig = {
- entry: {main: './src/index.js'}
- }
- output
定义输出配置
- output: {
- filename: '[name].js',
- path: path.resolve('./build')
- }
- Loader
1, 实现对不同格式的文件的处理, 比如说将 sCSS 转换为 css, 或者 typescript 转化为 js
2, 转换这些文件, 从而使其能够被添加到依赖图中
loader 是 webpack 最重要的部分之一, 通过使用不同的 Loader, 我们能够调用外部的脚本或者工具, 实现对不同格式文件的处理, loader 需要在 webpack.config.js 里边单独用 module 进行配置, 配置如下:
test: 匹配所处理文件的扩展名的正则表达式 (必须)
loader: loader 的名称 (必须)
include/exclude: 手动添加处理的文件, 屏蔽不需要处理的文件 (可选)
query: 为 loaders 提供额外的设置选项
- ex:
- var baseConfig = {
- // ...
- module: {
- rules: [
- {
- test: /* 匹配文件后缀名的正则 */,
- use: [
- loader: /*loader 名字 */,
- query: /* 额外配置 */
- ]
- }
- ]
- }
- }
babel-loader: 让下一代的 js 文件转换成现代浏览器能够支持的 JS 文件.
babel 有些复杂, 所以大多数都会新建一个. babelrc 进行配置
css-loader,style-loader: 两个建议配合使用, 用来解析 css 文件, 能够解释 @import,url() 如果需要解析 less 就在后面加一个 less-loader
file-loader: 生成的文件名就是文件内容的 MD5 哈希值并会保留所引用资源的原始扩展名
url-loader: 功能类似 file-loader, 但是文件大小低于指定的限制时, 可以返回一个 DataURL 事实上, 在使用 less,scss,stylus 这些的时候, npm 会提示你差什么插件, 差什么, 你就安上就行了
来源: http://www.qdfuns.com/note/15571/11b338cc19aa3a52a2811ff93487ab8b.html