前端开发前端导航工具/手册
我要投稿

如何写 Webpack 配置文件

时间: 2017-11-23阅读: 1163标签: webpack作者: Xiao555

本文从一个小Demo开始，通过不断增加功能来说明webpack的基本配置，只针对新手，也欢迎指正错误。

Node.js version： -v7.7.0 webpack 最好全局装一下

Base

我们先从简单的Demo开始，首先我创建了一个项目目录webpack，在该目录下运行命令：

npm init
npm install webpack html-loader style-loader css-loader --save-dev

安装完成后我的package.json是这样子的：

{
  "name": "webpack-example",
  "version": "1.0.0",
  "description": "A webpack example",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "webpack"
  ],
  "author": "xiao555",
  "license": "MIT",
  "devDependencies": {
    "css-loader": "^0.28.0",
    "html-loader": "^0.4.5",
    "webpack": "^2.3.3"
  }
}

然后我在根目录下创建了index.html，style.css，entry.js，webpack.config.js:

// index.html
<!DOCTYPE html>
<html>
<head>
  <title>Hello Webpack</title>
  <link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
  <h1>Hello Webpack!</h1>
  <script src="/bundle.js"></script>
</body>
</html>

// style.css
h1 {
  color: lightblue;
}

// entry.js
require('./style.css')

// webpack.config.js
let webpack = require('webpack')

module.exports = {
  entry: './entry.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      }
    ]
  }
}

然后修改一下package.json的scripts:

"scripts": { 
    "start": "webpack --config webpack.config.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

好了，这样一个简单的Demo就完成了，让我们看一下效果：

➜  webpack npm start

> webpack-example@1.0.0 start /Users/zhangruiwu/Desktop/webpack
> webpack --config webpack.config.js

Hash: f9e8a168c2845147afb4
Version: webpack 2.3.3
Time: 384ms
    Asset     Size  Chunks             Chunk Names
bundle.js  73.1 kB       0  [emitted]  main
   [0] ./style.css 895 bytes {0} [built]
   [1] ./entry.js 22 bytes {0} [built]
   [2] ./~/base64-js/index.js 3.48 kB {0} [built]
   [3] ./~/buffer/index.js 48.6 kB {0} [built]
   [4] ./~/css-loader!./style.css 190 bytes {0} [built]
   [5] ./~/css-loader/lib/css-base.js 2.19 kB {0} [built]
   [6] ./~/ieee754/index.js 2.05 kB {0} [built]
   [7] ./~/isarray/index.js 132 bytes {0} [built]
   [8] ./~/style-loader/addStyles.js 8.51 kB {0} [built]
   [9] ./~/style-loader/fixUrls.js 3.01 kB {0} [built]
  [10] (webpack)/buildin/global.js 509 bytes {0} [built]

可以看到目录里生成了一个bundle.js，这就是webpack打包后的文件，我们在浏览器里打开index.html: 


OK, 可以看到我们的css已经渲染上去了。 我们的webpack配置文件做了什么呢？

// webpack.config.js
let webpack = require('webpack')

module.exports = {
  entry: './entry.js', // 入口文件，根据这个文件来决定打包哪些文件
  output: {
    path: __dirname,   // 打包后文件存放的路径
    filename: 'bundle.js' // 打包后文件的名称
  },
  module: { // 决定不同类型的模块如何处理
    rules: [ // 决定了模块创建规则，
      {
        test: /\.css$/, // 匹配文件类型
        loader: 'style-loader!css-loader' // 应用加载器，'-loader'可以省略(v2好像不可以了)
      }
    ]
  }
}

Loader

好了，让我们改一下，我再目录里加了一张图片bg.jpg,修改了style.css ：

h1 {
  color: lightblue;
}

body {
  background-image: url('./bg.jpg');
}

npm start 一下：

ERROR in ./bg.jpg
Module parse failed: /Users/zhangruiwu/Desktop/webpack/bg.jpg Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./~/css-loader!./style.css 6:94-113
 @ ./style.css
 @ ./entry.js

报错了，这个错误是什么呢？因为我们引入了一个jpg图片文件，要打包的话需要一个处理这种文件类型的loader：

// bash
npm i url-loader --save-dev
// webpack.config.js
module: {
    rules: [
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        loader: 'url-loader' // copy文件的loader
      }
    ]
  }

重新npm start，发现根目录下多了一个f58125a1fa5c143130104dc5fa9af77b.jpg, 浏览器打开index.html: 


OK!

我们改造一下：

  1. css用stylus
  2. css,img等资源放在/src目录下
  3. 打包后图片文件放在/dist/static目录下
  4. 打包文件统一放在一个目录下/dist
npm i stylus stylus-loader html-webpack-plugin --save-dev

调整目录结构：

- webpack
    - src
        - assets
            - img
                - bg.jpg
        - style
            - main.styl
            - entry.js
    - index.html
    - webpack.config.js
    - package.json

// index.html
<!DOCTYPE html>
<html>
<head>
  <title>Hello Webpack</title>
</head>
<body>
  <h1>Hello Webpack!</h1>
</body>
</html>

// main.styl
h1
  color lightblue
body
  background-image url('~assets/image/bg.jpg')

// entry.js
import './main.styl'

// webpack.config.js
let webpack = require('webpack')
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    style: './src/style/entry.js' // 新的入口文件
  },
  output: {
    path: path.join(__dirname, './dist'), // 新的打包目录
    filename: '[name].js' // 这里的name对应entry的key值，这里是style，如果增加一个入口文件scrit的话，同样生成一个script.js
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader?sourceMap'
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        loader: 'url-loader?name=static/[hash].[ext]' // '?'后跟loader的配置参数，这里name指文件名，static目录下
      },
      { 
        test: /\.styl$/,  // 增加stylus文件的loader
        loader: "style-loader!css-loader!stylus-loader?sourceMap" // 可以通过'!'来级联loader
      }
    ]
  },
  resolve: {
    alias: {
      'assets': path.join(__dirname, './src/assets') // 定义别名，用法见main.styl 里 background-image url('~assets/image/bg.jpg')
    }
  },
  plugins: [
      // 这个插件用来处理html文件，https://github.com/jantimon/html-webpack-plugin , 这里的作业是吧index.html打包到dist目录下
    new HtmlWebpackPlugin({ 
      filename: 'index.html',
      template: 'index.html'
    })
  ]
}

npm start 之后生成的目录结构：

- dist
    - static
        - f58125a1fa5c143130104dc5fa9af77b.jpg
    - index.html
    - style.js

浏览器访问这个目录下的index.html，没有问题，为什么要把html搞到dist目录下呢？ 可以F12看看body背景图片的url，是相对与打包目录dist的，也就是说这里访问的根目录是打包目录，我们的html也要放进去。

让我们继续改造：

1. 引入第三方css

以FontAwesome为例：

npm install font-awesome --save

module: {
    rules: [
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader?sourceMap'
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        loader: 'url-loader?name=static/[hash].[ext]'
      },
      { 
        test: /\.styl$/, 
        loader: "style-loader!css-loader!stylus-loader?sourceMap"
      },
      {
          // FontAwesome 需要加载字体文件，(\?.*) 处理带版本号的文件
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'fonts/[name].[hash:7].[ext]'
        }
      }
    ]
  },

2. 多html文件

html-webpack-plugin 这个插件处理多html文件，就是多new几次，也可以通过数组ForEach的方法：

let config = {
  entry: {
    style: './src/style/entry.js'
  },
  output: {
    path: path.join(__dirname, './dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader?sourceMap'
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        loader: 'url-loader?name=static/[hash].[ext]'
      },
      { 
        test: /\.styl$/, 
        loader: "style-loader!css-loader!stylus-loader?sourceMap"
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'fonts/[name].[hash:7].[ext]'
        }
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'assets': path.join(__dirname, './src/assets')
    }
  },
  plugins: []
}
const array = ['index', 'test']
array.forEach((file) => {
  const conf = {
    filename: `${file}.html`,
    template: `${file}.html`
  }
  config.plugins.push(new HtmlWebpackPlugin(conf))
})

module.exports = config

3. 某些文件单独打包

以jquery为例：

npm i file-loader --save-dev
npm i jquery --save

- src
    - script
        - entry.js

// entry.js
import 'copy!jquery/dist/jquery.min.js'

// webpack.config.js
entry: {
  style: './src/style/entry.js',
  script: './src/script/entry.js' // 新增入口文件
},
...
resolveLoader: { // 处理loader
  alias: {
    'copy': 'file-loader?name=[name].[ext]', //&context=./src
  }
},

npm start 后会发现/dist 目录下jquery.min.js已经单独打包出来了

4. 热加载

以BrowserSync为例：

npm i browser-sync browser-sync-webpack-plugin --save-dev

let BrowserSyncPlugin   = require('browser-sync-webpack-plugin')

let config = {
 watch: true,
 plugins: [
    new BrowserSyncPlugin(
      // BrowserSync options 
      {
        // browse to http://localhost:3000/ during development 
        host: 'localhost',
        port: 4000,
        // proxy the Webpack Dev Server endpoint 
        // (which should be serving on http://localhost:3100/) 
        // through BrowserSync 
        // proxy: 'http://localhost:3100/'
        server: { 
          baseDir: ['dist'],
          directory: true  // with directory listing
        }
      },
      // plugin options 
      {
        // prevent BrowserSync from reloading the page 
        // and let Webpack Dev Server take care of this 
        reload: true
      }
    )
  ]
}

会自动打开浏览器访问http://localhost:4000/, 修改被打包的文件会自动刷新

5. 配置stylus和babel

npm i autoprefixer nib poststylus babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 --save-dev

// ./src/style/variables.styl
blue = #0073aa

// ./src/style/main.styl
h1
  color blue

let poststylus = require('poststylus')
...
plugins: [
    new webpack.LoaderOptionsPlugin({
      // test: /\.xxx$/, // may apply this only for some modules
      options: {
        stylus: {
          use: [
            poststylus([ 'autoprefixer' ]),
          ],
          import: [
            '~nib/index.styl',
            path.join(__dirname, 'src/style/variables.styl')
          ]
        },
        babel: {
          presets: ['es2015'],
          plugins: ['transform-runtime']
        }
      }
    }),
    ...
  ]

autoprefixer是个自动添加前缀的插件，nib是一个不错的css库，variables.styl可以作为stylus的全局变量加载，babel不用说，可以写es6的代码。

总结

感觉把以上说的走一遍，webpack基本的配置就可以熟悉了，会引入loader，配置loader选项，会设置alias，会用plugins差不多。

至于现在一些比较大的项目中分多个配置文件，是根据不同的场景拆分开的，基本的一个webpack.base.config.js,主要包含loader，resolve等全局通用的部分，剩下的根据开发或者生产环境分成webpack.dev.config.js，webpack.prod.config.js，除了都会合并base的内容，其他可能跟去环境不一样像output， plugins也都有所不同。

另外，我说的不是很详细，有些东西还要自己去踩坑，比如loader和plugins的配置可以看官方文档，我没有详细说。


原文转载：https://www.xiao555.com.cn/posts/webpack-config


上一页:  ht.js基于 HTML5 WebGL 的 3D “弹力”布局下一页:  js设计模式之单例模式,javascript如何将一个对象设计成单例

webpack—url-loader 解决项目中图片打包路径问题

刚开始用webpack的同学很容易掉进图片打包这个坑里，比如打包出来的图片地址不对或者有的图片并不能打包进我们的目标文件夹里。下面我们就来分析下在webpack项目中图片的应用场景。

基于 React & TS & Webpack 的微前端应用模板

在 Web 开发导论/微前端与大前端一文中，笔者简述了微服务与微前端的设计理念以及微前端的潜在可行方案。微服务与微前端，都是希望将某个单一的单体应用，转化为多个可以独立运行、独立开发、独立部署、独立维护的服务或者应用的聚合

Vue -- webpack 项目自动打包压缩成zip文件

这段时间用 Vue2.0 开发项目，每次打包都会用到 npm run build 命令，但是每次部署时给后端发包都要手动zip压缩，这样一两次还行，但遇到项目板块测试和临时加急功能测试的时候，一天可能就要打包好多次，这就很烦了。

在webpack自定义配置antd的按需加载和修改主题色

最近使用antd来做react项目的UI。从antd官网上，在使用create-react-app脚手架搭建项目时步骤如下：加模块 react-app-rewired, babel-plugin-import, react-app-rewire-less,根目录添加config-overrides.js,修改npm script即可， 一切正常

webpack 构建多页面应用初探

如何使用webpack构建多页面应用，这是一个我一直在想和解决的问题。网上也给出了很多的例子，很多想法。猛一看，觉得有那么点儿意思，但仔细看也就那样。使用webpack这个构建工具，可以使我们少考虑很多的问题。

通用、封装、简化 webpack 配置

现在，基本上前端的项目打包都会用上 webpack，因为 webpack 提供了无与伦比强大的功能和生态。但在创建一个项目的时候，总是免不了要配置 webpack，很是麻烦。简化 webpack 配置的一种方式是使用社区封装好的库，比如 roadhog。

webpack 前后端分离开发接口调试解决方案，proxyTable解决方案

如果你有单独的后端开发服务器 API，并且希望在同域名下发送 API 请求 ，那么代理某些 URL 会很有用。dev-server 使用了非常强大的 http-proxy-middleware 包。更多高级用法，请查阅其文档。在 localhost:3000 上有后端服务的话，你可以这样启用代理

浅谈webpack优化

由于前端的快速发展，相关工具的发展速度也是相当迅猛，各大框架例如vue,react都有自己优秀的脚手架工具来帮助我们快速启动一个新项目，也正式因为这个原因，我们对于脚手架中最关键的一环webpack相关的优化知之甚少

Vue中使用webpack别名的方法

Vue中使用webpack别名的方法,需要引入公共文件，但是公共文件的文件路径里当前文件很远，那么就会形成上面示例中的那种路径很长的情况。而因为文件目录是约定俗成的，不可轻易更改，无法修改相对路径。那么该怎么办呢？

webpack项目轻松混用css module

本文讲述css-loader开启css模块功能之后，如何与引用的npm包中样式文件不产生冲突。比如antd-mobilenpm包的引入。在不做特殊处理的前提下，样式文件将会被转译成css module。

fly63.com版权所有，内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏： 土味情话心理测试脑筋急转弯