webpack40从零开始单页多页应用配置二

jiezi

6 年前

webpack4.0 从零开始单页（多页）应用配置 (一)

通过 webpack 运行起的项目如果不对图片资源做处理是不会加载到文件的。

例：我们在 src 目录下添加一个 image 目录并且放入一张图片在里面：
且在 style.css 文件加入如下代码：

html, body{
    height: 100%;
    background-color: red;
    background-image: url('./image/yangmi.jpg')
}

执行 npm run dev 发现并不会如期那样，界面上呈现图片。且报如下错误

提示已经很智能了，需要安装 loader 解析此类文件。

安装：npm install --save-dev file-loader url-loader

之前讲过处理资源一般是在 moude 配置，所以在 moude 下的规则配置如果就能加上图片了

{
    test: /\.jpg|\.png|\.gif|\.jpeg|\.svg/,
    use: {
        loader: 'url-loader',
        options: {limit: 8192 // 将小于 8kb 的图片 转为 base64，这样就会减少发送 http 的请求提高性能}
    }
}

再次执行，npm run dev;

项目中可能会加入各种字体库，现在除了 svg，我们用得比较多的就是iconfont 了所以这里我们拿 iconfont 举例：我们在 iconfont 图标库里导出图标，并将放在 src 目录下命名为font:

webpack.config.js添加配置如下：

{test: /\.(woff|woff2|eot|ttf|otf)$/,
  use: {loader:'url-loader'}
}

并在 main.js 文件引入 iconfont.css 并添加一个名为 iconauth 的名字并执行 npm run dev 如下：

安装：npm install vue --save npm install --save-dev vue-loader

webpack.config.js

{
    test: /\.vue$/,
    use: {loader: 'vue-loader'}
}

main.js

import Vue from 'vue';
import App from './app.vue'

new Vue({
  el: '#app',
  render: h => h(App)
});

执行 npm run dev 编译报错：
<font color=”#b20000″>vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.</font>
所以需要再安装：
npm install --save-dev vue-template-compiler

关于 vue-template-compiler 的定义，其 github 描述如下：
This package can be used to pre-compile Vue 2.0 templates into render functions to avoid runtime-compilation overhead and CSP restrictions. In most cases you should be using it with vue-loader, you will only need it separately if you are writing build tools with very specific needs.
翻译如下：
此包可用于将 Vue 2.0 模板预编译为呈现函数，以避免运行时编译开销和 CSP 限制。在大多数情况下，您应该将它与 vue-loader 一起使用，如果您正在编写具有特定需求的构建工具，则只需要单独使用它;

所以不知道的人很容易将 vue-template-compiler 遗忘，不过跟着处理一个一个报错就行了，，，哈哈~
再次执行 npm run dev:
what?

日常每天问自己，我哪儿做错了，我知道了我一定改 ╥﹏╥！

在 github 上看到了别人的回答：，可能是因为 v15 还不太稳定的原因，所以将其回到 vue-loader@^14.2.2 版本就行了，
npm install --save-dev vue-loader@^14.2.2

都知道解决 ES6 都是通过 babel 进行编译的，所以安装 babel 相关插件:

`npm install babel-core babel-loader babel-preset-env babel-preset-stage-0 babel-preset-stage-1 babel-preset-stage-2 babel-preset-stage-3
–save-dev`
在项目根目录下创建.babelrc

{
  "presets": [
    "env",
    "stage-0",
    "stage-1",
    "stage-2",
    "stage-3"
  ],
  "plugins": ["transform-runtime"]
}

新增 webpack.config.js 配置

{
    test: /\.js$/,
    exclude: /node_modules/,
    use: {loader: "babel-loader"}
}

安装：我们在项目开发中并不是所有的语法都会用到，所以添加 babel-plugin-transform-runtime 将用到的会自动打包到项目中
npm i babel-plugin-transform-runtime --save-dev

.babelrc 配置

{
  "presets": [
    "env",
    "stage-0",
    "stage-1",
    "stage-2",
    "stage-3"
  ],
  "plugins": [
    [
      "transform-runtime",
      {"polyfill": false}
    ]
  ]
}

将开发环境的配置和生产环境的配置放在不同目录更加有利于阅读，且不用在同一目录下写很多判断去区分，所以在根目录下新建webpack.dev.config.js 和 webpack.prod.js;

修改 package.json

{
    script: {
        "dev": "webpack-dev-server --development --config webpack.dev.js",
        "build": "webpack --config webpack.prod.js --production"
    }
}

引入webpack-merge

npm install --save-dev webpack-merge

webpack.dev.js 添加入代码

const Merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.config');
const path = require('path');

console.log(process.env.NODE_ENV);

module.exports = Merge(baseWebpackConfig, {
  devServer: {contentBase: path.join(__dirname, 'dist'),// 服务器资源的根目录，不写的话，默认为 bundle.js
    hot: true, // 启用热加载
    host: 'localhost',
    port: 8800,// 端口号
    compress: true, // 服务器资源采用 gzip 压缩
  },// 通过 node 起一个本地服务器，webpack-dev-server 完成一些代理，mock 数据热加载等功能
  mode: 'development'
});

webpack.prod.js 添加如下代码

const Merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.config');

module.exports = Merge(baseWebpackConfig, {mode: 'production'});

到这里基本上可以运行于项目了，后期会讲到如果优化一些项，比如提取多次引用问题，自动添加 css 前缀等！

webpack40从零开始单页多页应用配置二

加载图片

加载字体

引用 vue

编译 ES6 代码兼容浏览器

区分开发环境和生产环境