webpack自定义配置

webpack.config.js

var path = require('path');
var webpack = require('webpack');
module.exports = {
  // entry: path.join(__dirname, 'src/index.js'),
  entry: ['./src/index'],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false,
      },
    }),
    new webpack.optimize.OccurenceOrderPlugin()
  ],
  module: {
    loaders: [{
      test: /\.css$/,
      loaders: ['style', 'css']
    }]
  }
}

四个核心概念:

• 入口（entry），告诉 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。 可以传入字符串, 数组, 对象

• 出口（output），告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist

  • path - 表示输出文件的路径
  • filename - 表示输出文件的文件名

• 加载器（loader），告诉 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）

• 插件（plugin），给 webpack 添加更多的功能，使 webpack 更加的灵活和强大，webpack 有两种类型的插件: ①内置插件 ②外置插件

package.json

• vue

• vue-loader

  • 作用: 解析和转换 .vue 文件，提取出其中的逻辑代码 script、样式代码 style、以及 html 模版 template，再分别把它们交给对应的 Loader 去处理。
  • 依赖: vue-loader 需要 css-loader 和 vue-template-loader 作为依赖

• css-loader

  • 作用: 加载由 vue-loader 提取出的 CSS 代码

• vue-template-loader

  • 作用: 把 vue-loader 提取出的 HTML 模版编译成对应的可执行的 JavaScript 代码，这和 React 中的 JSX 语法被编译成 JavaScript 代码类似。预先编译好 HTML 模版相对于在浏览器中再去编译 HTML 模版的好处在于性能更好。

• style-loader

• url-loader

  • url-loader 需要 file-loader 作为依赖

• webpack

• webpack-dev-server

• cross-env

项目搭建时遇到的一些坑

1. 其中一个是在安装了webpack-dev-server后, 使用npm run dev 的时候报错,

   看报错信息以为要安装 webpack-cli, 但是安装后又报另一个错误, 遂去网上查询, 最后 webpack-dev-server的版本从 3.1.5 降到 2.9.7 解决

> vue-webpack@1.0.0 dev D:\code\practice\vue-webpack
> cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js

The CLI moved into a separate package: webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
-> When using npm: npm install webpack-cli -D
-> When using yarn: yarn add webpack-cli -D
module.js:529
    throw err;
    ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
    at Function.Module._resolveFilename (module.js:527:15)
    at Function.Module._load (module.js:476:23)
    at Module.require (module.js:568:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (D:\code\practice\vue-webpack\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1)
    at Module._compile (module.js:624:30)
    at Object.Module._extensions..js (module.js:635:10)
    at Module.load (module.js:545:32)
    at tryModuleLoad (module.js:508:12)
    at Function.Module._load (module.js:500:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue-webpack@1.0.0 dev: `cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vue-webpack@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\hk\AppData\Roaming\npm-cache\_logs\2018-08-25T12_43_41_250Z-debug.log

2. 在安装了 webpack-dev-server 后, 将 devServer 配置的 hot 属性设置为true 后并没有生效, 后台查询知道在plugin里面要加入 new webpack.HotModuleReplacementPlugin()

3. vue-loader在较高的版本不仅要在module中使用vue-loader解析.vue文件, 还要导入 VueLoaderPlugin, 并且在plugins中调用 且引入的方法为 const { VueLoaderPlugin } = require(‘vue-loader’); (不要漏了大括号)

4. 注意配置 webpack-dev-server 的时候, port 不要设置已经被占用的端口, 否者npm run dev会报错

5. 要启用webpack的热更新功能不仅要把 devServer 对象的hot 设置为 true 还要在plugins中增加 一个插件: HotModuleReplacementPlugin