Webpack记录

Webpack是什么

webpack是一种模块化的打包方法，每一个文件都是一个模块使用id关联。它比grunt/gulp要强大很多，所以在很多项目中已经替代了其他的打包工具。

开始使用Webpack

1、安装(需要先安装node,npm)

// 全局安装 (一般选择全局安装)
npm install -g webpack 
// 安装到项目路径
npm install --save-dev webpack (使用--save-dev回添加到package.json)
npm install --save-dev webpack-dev-server
// 构建本地服务器

2. webpack.conf配置

基本配置webpack.base.conf.js

module.exports = {
    devtool: 'source-map',// 有四种配置:
    // 1. sorce-map 打包很慢 
    // 2. cheap-module-source-map 打包快,影响调试 
    // 3. eval-source-map 打包快适合dev阶段 
    // 4. cheap-module-eval-sorce-map  同上
    entry: {
        app: __dirname + "./src/main.js" // 这是入口文件
        // __dirname是node中的一个全局变量指向项目根目录
    },
    output: {
        path: __dirname + "dist",// 打包后的输出文件目录
        filename: "[name].js" // 输出文件名
    },
    devServer: {
        contentBase: './dist',// 根目录
        historyApiFallback: true, // 页面跳转 true 单页
        inline: true, // 同步页面
        hot: true, // 热加载
        port: 8080, // 端口
        host：'localhost', 
        autoOpenBrowser: true, // 启动时自动打开页面
        useEslint: true,
        proxyTable: {// 配置代理
            '/api': {
                target: 'http://localhost:8080',
                pathRewrite: {
                    '^api': '/static/mock'
                }
            }
        }
    }
},
resolve: {
  extensions: ['.js', '.vue', '.json'], // 忽略文件后缀
  alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'), // @指向src目录，可以自己配置(短路径)
      'styles': resolve('src/assets/styles')
      // 在其他文件引入css文件 import 'styles/common.css'
  }
},
module: {
    rules: [
     // 这里配置各种loader, vue/babel/css/url/sacc/stylus...
     解析各种文件让浏览器可以识别
    ]
},
plugins: {
   // 下面介绍 
}

3、package.json配置指令

"scripts": {
    "start": "npm run dev",
    "dev": "webpack-dev-server --inline --process --config build/webpack.dev.conf.js", 
    "build": "node build/build.js"
}
// dev指令执行dev文件 build指令自行build文件内部加载prod文件及其他的配置
//项目结构
'build'
    'build.js'
    'webpack.base.conf.js'
    'webpack.dev.conf.js'
    'webpack.prod.confjs'
'config'
    'dev.env.js'
    'index.js'
    'prod.env.js'
'src'
    '...其他文件'
'static'
    'mock'
        '...本地json数据'
'index.html'
'package.json'
'.babelrc'

4、Module配置

module: {
    rules: [
        {
            test: /\.js$/,
            loader: 'babel-loader',
            include: [resolve('node_modules/webpack-dev-server/client')], // 包含
            exclude: /node-modules/ // 过滤掉
        },
        {
            test: /\.css$/,
            use: [
                {
                 loader: 'style-loader'   
                },{
                  loader: 'css-loader',
                  options: {
                      modules: true
                  }
                },{
                    loader: 'postcss-loader'
                }
            ]
        }
    ]
}
// 使用loader需要安装
npm install --save-dev style-loader css-loader balbel-loader
// 自动添加css前缀
npm install --save-dev postcss-loader autoprefixer

// .babelrc 
{
    "presets": [
        ["env", {
          "modules": false,
          "targets": {
            "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
          }
        }],
        "stage-2"
    ],
    "plugins": ["transform-vue-jsx", "transform-runtime"]
    // 使用的插件
}

5、Plugins配置

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')// 生成一个新的index.html
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const cleanWebpackPlugin=require('clean-webpack-plugin') //每次build先删除dist
const CopyWebpackPlugin = require('copy-webpack-plugin')

plugins: [
    new HtmlWebpackPlugin({
        filename: path.resolve(__dirname, '../dist/index.html', // 新的index.html地址
        tempalte: 'index.html', // 模板地址
        minify:{
            collapseWhitespace: true //折叠空白区域 也就是压缩代码
        }
    }),
    new webpack.optimize.UglifyJsPlugin(),// 压缩js
    new ExtractTextPlugin("styles/[name].css"),
    // 分离css js （styles 短路径在resolve有配置）
    // 安装 npm install --save-dev extract-text-webpack-plugin
    new CleanWebpackPlugin(['dist']), //传入数组,指定要删除的目录
    new CopyWebpackPlugin([ // 复制插件 需要安装
      {
        from: path.resolve(__dirname, '../static'),
        to: 'static', // dist/static
        ignore: ['.*']
      }
    ]),
    new webpack.HotModuleReplacementPlugin(), //热加载插件
    new webpack.NamedModulesPlugin() // 显示文件名而不是id
]

webpack的常用配置记录，当然webpack的强大不仅记录的这些，这些配置是比较常用的。