webpack

前言

webpack的相关内容

vue cli中的vue.config.js配置

参考：https://cli.vuejs.org/zh/config/

// 开启严格模式
'use strict'

// 定义路径
const path = require('path')
// resolve函数
function resolve(dir) {
    return path.join(__dirname, dir)
}

// 导出一个包含了选项的对象
module.exports = {
  // 下面就是各种选项...    
 

  publicPath: process.env.NODE_ENV === 'production'
    ? './'
    : '/', // 部署应用时的URL，通过三元配置dev和prod环境。
           // 注意：prop的绝对路径'/prop/'，如：https://moxie.xyz/prop/
  outputDir: 'dist', // build时输出的文件目录，
                     // 目标目录的内容在构建之前会被清除，构建时传入--no-clean可关闭该行为
  assetsDir: 'static', // 相对于outputDir放置静态文件夹目录(js、css、img、fonts)
  indexPath: 'index.html', // 生成的index.html 的输出路径
  filenameHashing: true, // 生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存
  lintOnSave: false, // eslint-loader是否在保存的时候检查
                     // 配置参数 boolean | 'warning' | 'default' | 'error'
                     // process.env.NODE_ENV !== 'production'
  productionSourceMap: false, // 生产环境是否要生成sourceMap
  // transpileDependencies: [], // 默认babel-loader忽略所有node_modules中的文件
  // dev环境下的相关配置
  devServer: {
    port: 8080, // 开发运行时的端口
    open: false, // 运行时是否直接打开浏览器
    https: false, // 是否启用https
    host: ip, // 开发运行时域名，在同一个局域网下可访问。如：http://ip:port/...
              // 使用0.0.0.0，在同一个局域网下可以访问到我的项目（默认就是这个好像）
              // 手机访问需要cmd中ipconfig的无线网IPv4地址
    overlay: { // 浏览器overlay同时显示警告和错误
      warnings: false,
      errors: true
    },
    proxy: { // 增加一个api的前缀（proxyTable代理服务器）
      '/api': {
        target: process.env.VUE_APP_BASE_API, // 后台接口域名
        ws: true, // 如果要代理 websocket，配置这个参数
        secure: false, // 如果是https接口，需要配置这个参数
        changeOrigin: true, // 是否跨域
        pathRewrite: {
          '^/api': '' // 用'/api'代替target里面的地址
        }
      }
    }
  },
  // webpack的配置
  // 使用configureWebpack调整webpack配置，如别名配置。
  configureWebpack: {
    name: '网页标题', // 在index.html中的<title><%= webpackConfig.name %></title>
    // 一般在beforeEach设置网页标题document.title = 'xxx'
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  },
  // 对内部的webpack配置进行更细粒度的修改
  chainWebpack: (config) => {}
  // 其他配置暂未使用过
}

---

CommonJS

module的exports属性（module.exports）是对外的接口。require方法用于加载模块。

---

webpack

webpack --config可以配置webpack的加载那个文件

webpack项目的创建

npm init // 初始化一个项目
npm install webpack --save--dev // 安装webpack
npm install webpack-dev-server --save-dev // 安装webpack-server启动服务
// 新建一个webpack.config.js文件
// webpack的配置就是在这个文件中配置（webpack可以理解为；一个js文件而已）
var config = {}
// 还未安装支持ES6的编译插件，因此不能直接使用ES6的语法，否则会报错。
module.exports = config // 相当于export default config

// package.js新增
{
    // ...
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --config webpack.config.js"
    },
    // ...
}
// npm run dev会执行webpack-dev-server --open--configwebpack.config.js命令。
// --config指向webpack-dev-server读取的配置文件路径，
// --open会在执行命令时自动在浏览器打开页面，默认地址是127.0.0.1:8080（localhost:8080）
// 配置参考：host（主机）和prot（端口）
// webpack-dev-server --host 172.172.172.1--port 8888--open--config webpack.config.js

// 配置config，必须要配置入口entry与出口output
var path = require('path')
var config = {
    entry: { // 入口寻找依赖
        main: './main' // 新建main.js入口文件
    },
    output:{ // 出口配置生成编译后的文件存储位置和文件名
        path: path.join(__dirname,'dist'), 
        publicPath: '/dist',
        filename: 'main.js'
    }
}
module.exports = config
// 新建一个index.html，引入编译后的main.js（引入没编译的main.js暂未测试）
npm run dev // 即可运行

npm install css-loader --save-dev
npm install style-loader --save-dev
// 引入Loader
var config = {
    // ...
    module: {
        rules: [
            {
               test: /\.css$/,
               use: ['style-loader','css-loader']
            }
        ]
    }
};
// 只要是.css结尾的文件，就会先使用loader加载再之后打包
// 新建css，main.js引用就会生效

// JavaScript动态创建<style>标签来写入样式，样式代码编译在main.js里太占体积且不能做缓存。
// 使用插件（Plugins）解决，生成main.css后在index.html通过<link>加载。
npm install extract-text-webpack-plugin --save-dev
// 导入插件（config.js）
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var config = {
    // ...
    module: {
        rules: [
            {
               test: /\.css$/,
               use: ExtractTextPlugin.extract({
                   use: 'css-loader',
                   fallback: 'style-loader'
               })
            }
        ]
    },
    plugins: [
        // 重命名提取后的css文件
        new ExtractTextPlugin("main.css")
    ]
};

---

vue-loader

使用.vue文件需要先安装vue-loader、vue-style-loader等加载器并做配置。因为要使用ES6语法，还需要安装babel和babel-loader等加载器。

npm install --save vue
npm install --save-dev vue-loader
npm install --save-dev vue-style-loader
npm install --save-dev vue-template-compiler
npm install --save-dev vue-hot-reload-api
npm install --save-dev babel
npm install --save-dev babel-loader
npm install --save-dev babel-core
npm install --save-dev babel-plugin-transform-runtime
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-runtime
// 配置webpack.config.js

var config = {
    var ExtractTextPlugin = require('extract-text-webpack-plugin');
    // ...
    module: {
        rules: [
           {
               test: /\.vue$/,
               loader: 'vue-loader',
               options: {
                   loaders: {
                   css: ExtractTextPlugin.extract({
                       use: 'css-loader',
                       fallback: 'vue-style-loader'
                   })
                }
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
        }
    ]
    // ...
}

---

babel配置

// 根目录新建.babelrc，webpack会依赖此配置文件来使用babel编译ES6代码
{
    "presets": ["es2015"],
    "plugins": ["transform-runtime"],
    "comments": false
}

---

webpack进一步配置

// 安装url-loader和file-loader来支持图片、字体等文件
// npm install --save-dev url-loader
// npm install --save-dev file-loader
// webpack.config.js
var config = {
    // ...
    module: {
        rules: [
            // ...
            {
                test: /\.(gif|jpg|png|woff|svg|eot|ttf)\? ? .*$/,
                loader: 'url-loader? limit=1024'
            }
        ]
    }
};

---

webpack的打包

// npm install --save-dev webpack-merge
// npm install --save-dev html-webpack-plugin
// 在package.json中，再加入一个build的快捷脚本用来打包
"scripts": {
    "dev": "webpack-dev-server --open --config webpack.config.js",
    "build": "webpack --progress --hide-modules --config webpack.prod.config.js"
}

// 根目录新建生产环境的配置文件webpack.prod.config.js
var webpack = require('webpack');
var HtmlwebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var merge = require('webpack-merge');
var webpackBaseConfig = require('./webpack.config.js');

// 清空基本配置的插件列表
webpackBaseConfig.plugins = [];

module.exports = merge(webpackBaseConfig, {
    output: {
        publicPath: '/dist/',
        //将入口文件重命名为带有20位hash值的唯一文件
        filename: '[name].[hash].js'
    },
    plugins: [
        new ExtractTextPlugin({
            // 提取css，并重命名为带有20位hash值的唯一文件
            filename: '[name].[hash].css',
            allChunks: true
        }),
        // 定义当前node环境为生产环境
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        // 压缩js
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        // 提取模板，并保存入口html文件
        new HtmlWebpackPlugin({
            filename: '../index_prod.html',
            template: './index.ejs',
            inject: false
        })
    ]
});

---