Sping Boot + Vue + Webpack 项目实战（三）：配置静态资源、代码校验和webpack-dev-server

前言

好了，上一篇我讲了怎么使用webpack来构建vue项目，接下将对它进一步完善，添加静态资源和代码校验及webpack-dev-server服务器，废话不多说，直接开始吧。

配置静态资源

安装

在配置之前，需要安装样式和文件资源处理的loader

npm install style-loader --save-dev
npm install --save-dev url-loader file-loader //url-loader是基于file-loader的

配置

module: {
   
        rules: [
            {
   
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
   
                test: /\.(gif|jpg|jpeg|png|svg)/,
                use: {
   
                    loader: 'url-loader',
                    options: {
   
                        limit: 1024,    // 每次输出文件的字节数的大小
                        name: '[name].[ext]'    // 输出的文件类型
                    }
                }
            }
        ]
    },

css处理器

这里css处理器使用的是stylus，当然也可以使用其他处理器，可以根据个人习惯去更换，我这里使用它是因为它编写的样式简洁，容易阅读

安装

npm install stylus-loader stylus --save-dev

配置

module: {
   
        rules: [
            {
   
                test: /\.styl(us)?/,
                use: [
                    'css-loader',
                    'stylus-loader'
                ]
            }
        ]
}

安装配置webpack-dev-server

安装

npm install --save-dev webpack-dev-server html-webpack-plugin	

npm install --save-dev cross-env
// cross-env是设置系统环境变量的，不同平台会有不同的环境变量，cross-env主要提供处理环境变量方案，只要正确的设置，则无需在开发中过多的去关注环境变量的设置问题

cross-env的配置

cross-env是运行跨平台设置和使用环境变量的脚本

{
   
  "scripts": {
   
    "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
  }
}

webpack-dev-server的配置

const webpack = require('webpack')

const isDev = process.env.NODE_ENV === 'development'

const config = {
   
  target: 'web',  // 编译目标
  plugins: [
    new webpack.DefinePlugin({
   
      'process.env': {
   
        NODE_ENV: isDev ? '"development"' : '"production"'
      }
    }),
    new HtmlWebpackPlugin({
   
      template: path.