这篇基本上转载自滴滴前端团队的一片文章,感谢这样优秀的前端团队.

目录结构

.
├── README.md
├── build
│   ├── build.js
│   ├── check-versions.js
│   ├── dev-client.js
│   ├── dev-server.js
│   ├── utils.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config
│   ├── dev.env.js
│   ├── index.js
│   └── prod.env.js
├── index.html
├── package.json
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── Hello.vue
│   └── main.js
└── static

插件

webpack有很多内置插件,也有第三方插件,用来拓展webpack相关功能
如果是第三方插件,需要先安装

HtmlWebpackPlugin

自动生成html插件,自动在dist目录下自动生成一个index.html

css

webpack提供了两个工具处理样式表 –> css-loader 和 style-loader
css-loader 可以使用类似@import或url(…)的方法实现require的功能
style-loader将所有计算后的样式加入到页面中
两者缺一不可(多个加载器中间用!分割,从右向左执行,也可写成数组形式)

{test:/\.css$/,
loader:'style!css'  
//也可以写成
loader:['style','css']
}

前言

作为一个前端开发者,现在已经不可避免的要和webpack打交道了,尤其使用vuejs以后,项目上不可避免要使用集成webpack的vue-cli.

vue-cli基本上已经配置好了相关的webpack配置,基本上就可以开发了,不用开发人员再配置webpack,省时省力.

但是webpack还是要弄清除基本的配置,尤其在面试的时候不可避免被问到,我在网上看到好多讲解的文章,受益匪浅,但是总是看时明白,过两天就忘记了,望而复始,所以想总结一下,以便能有个地方可以随时查阅,下面会引用别人的文章,以及自己的理解,肯定会有错误之处,请多对比.

webpack特点

是一个模块打包工具,不同于gulp,gulp只是一个构建工具,只执行相应的任务,比如说压缩/合并/检查/自动刷新等等,替代了人工操作,提高了开发人员的工作效率而已,不会对项目结构有所影响.

webpack会把js/css/image/html等文件都视作模块,根据模块依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源.不仅仅可以执行压缩/合并等任务,还会深度参与项目结构.而且可以根据需求生成多个打包js,可以异步加载,实现按需加载.

两个特点:

1. 一切皆模块

2. 按需加载

webpack基本配置

可以子命令行执行 webpack ………来打包

一般专门配置webpack.config.js来方便的只在命令行执行webpack来打包.

实际开发中一般又分成webpack.dev.config.js和webpack.build.config.js,还可能有webpack.test.config.js.具体可以参考vue-cli,后面在具体讲解.

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      {test: /\.(js|jsx)$/, loader: 'babel-loader'}
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

这是一个简单的示例,还有其他配置选项,下面一个一个来介绍.(因为webpack2配置方面有点改变比如,loader->rules等等,可能下面的会有所冲突)