webpack 4.x + Vue基础配置，强化对vue-cli的认识

此配置为自己动手的webpack 4.x简单配置，高手绕过，入门者共同学习！不懂处可自行百度或者留言

webpack中文官网

坑：全局webpack版本为3.x, 而项目为4.x

建议安装项目局部的webpack版本

npm i -D webpack webpack-cli

初始化 package.json

npm init -y 或 npm init

生成一下package.json文件

{
  "name": "demo_03",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

第一步设置package.json的编译字段

一般来说有两种 npm run dev 和 npm run build

webpack添加了两个方便的点 `--mode` 和 `--env.NODE_ENV`

mode 两种方式
- --mode development 开发模式，编译后的js不压缩
- --mode production 生产模式，编译后的js压缩
--env.NODE_DEV 设置环境模式
- --env.NODE_ENV=development 设置环境为development开发模式
- --env.NODE_ENV=production 设置环境为production生产模式

webpack     // 不设置mode的情况下 打包出来的文件自动压缩
webpack --mode development  // 设置mode为开发模式，打包后的文件不被压缩
webpack --mode production // 设置mode为生成环境，打包后的文件压缩
webpack --env.NODE_ENV=development 设置process.env.NODE_ENV为开发环境
webpack --env.NODE_ENV=development 设置process.env.NODE_ENV为生产环境

package.json中的script

"scripts": {
    "dev": "webpack --mode development --env.NODE_ENV=development",
    "build": "webpack --mode production --env.NODE_ENV=PRODUCTION"
  },

在webpack.config.js中如何获取呢?

const path = require('path');
module.exports = env => {
  // Use env. here:
  console.log('NODE_ENV: ', env.NODE_ENV) // 'production' 根据此处判断环境
  console.log('Production: ', env.production) // ture

  return {
    entry: './src/index.js',
    output: {
      filename: 'index.js',
      path: path.resolve(__dirname, 'dist')
    }
  }
}

第二步简单启动编译vue项目文件

肯定就安装vue相关的vue的npm包 vue vue-loader

注意：控制台会提醒安装css-loader 和 vue-template-compiler
不要吝啬，也一并安装了吧

npm i -D vue vue-loader

在项目文件里新建个webpack.config.js文件

webpack 4.x + Vue基础配置，强化对vue-cli的认识_第1张图片

image

代码如下

const configFun = (env)=> {
    return {
        entry: path.join(__dirname, 'src/main.js'), 
        output: {
            filename: 'index.js', 
            path: path.resolve(__dirname, 'dist')
        }
        module: {
            rules:[{
                test: /\.vue$/,
                loader:'vue-loader'
            }]
        }
    },
}
module.exports = (env)=> {
    let config = configFun(env)
    return config;
}

项目文件中新建src文件，在src文件中新建app.js和main.js
代码如下：

//main.js
import Vue from 'vue'
import App from './app.vue'


let root = document.createElement('div');
document.body.appendChild(root);


new Vue({
    render: (h)=> h(App)
}).$mount(root)

// app.vue

第三步添加其他模块的编译

js的ES6化，css和图片

npm i -D babel-core babel-loader babel-preset-es2015 style-loader url-loader file-loader

疑问1、如果不明白babel-core babel-loader babel-preset-es2015的区别和联系可以点击查看一下大神的文章

babel-loader、babel-core、babel-preset-env的区别和联系

疑问2、url-loader file-loader的关系

url-loader对未设置或者小于limit设置的图片进行转换，以base64的格式被img的src所使用；而对于大于limit byte的图片用file-loader进行解析。

在webpack.config.js配置好module，代码如下

module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader'
        },
        {
            test: /\.vue$/,
            loader:'vue-loader'
        },
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        },
        {
            test: /\.(gif|jpg|jpeg|svg)/,
            use: [
                {
                    loader: 'url-loader',
                    options: {
                        limit: 1024,
                        name: '[name].[hash:6].[ext]'
                    }
                },
            ]
        }
    ]
},

在项目文件下新建.babelrc文件，代码如下

{
  "presets": ["es2015"] 
}

es2015根据你下载的npm的babel-preset-es2015包不同来决定的；如果是babel-preset-env，那就是"presets": ["env"]

第四步生成html模块

到现在为止项目中没有html文件，作为前端项目最为基本的，webpack为我们提供了html-webpack-plugin的包，可以运用此包生成html文件

npm i -D html-webpack-plugin

在webpack.config.js文件中如下

const htmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
    new htmlWebpackPlugin()
]

html-webpack-plugin配置属性

title 生成html文件的标题
filename 就是html文件的文件名，默认是index.html
template 依照的模板 html ejs ejs
inject inject有四个值： true body head false
- true 默认值，script标签位于html文件的 body 底部
- body script标签位于html文件的 body 底部
- head script标签位于html文件的 head中
- false 不插入生成的js文件，这个几乎不会用到的
favicon 给你生成的html文件生成一个 favicon ,值是一个路径
minify 使用minify会对生成的html文件进行压缩。默认是false
cache 默认是true的，表示内容变化的时候生成一个新的文件。
showErrors 当webpack报错的时候，会把错误信息包裹再一个pre中，默认是true。
chunks chunks主要用于多入口文件[name]
excludeChunks 排除掉一些js
xhtml 一个布尔值，默认值是 false ，如果为 true ,则以兼容 xhtml 的模式引用文件。
chunksSortMode script的顺序，默认四个选项： none auto dependency {function}

在此不做html-webpack-plugin过多的讲解，推荐一篇文章查看

第五步 webpack-dev-server

webpack-dev-server用于开发者在开发中配置使用的

webpack官网有详细的说明，开发中 Server(devServer)

根据上面的webpack.config.js的代码，添加以下代码

const devConfigFun = (argument)=> {
    argument.devtool = '#cheap-module-eval-source-map';
    argument.devServer = {
        port: '8000',
        host: '0.0.0.0',
        overlay: {
            errors: true
        },
        open: true,
        hot: true
    }
    argument.plugins.push(
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
    )
    return argument;
}

module.exports = (env)=> {
    let config = configFun(env)
    if (env.NODE_ENV === 'development') {
        config = devConfigFun(config)
    }
    return config
};

NODE_ENV设置成其他文件可以访问

在原来的代码基础上添加

任意js文件或者vue文件都可以获取

// src/main.js
console.log(process.env.NODE_ENV) // development

// src/app.vue
mounted() {
    console.log(process.env.NODE_ENV) // development
}

const configFun = (env)=> {
    return {
        plugins: [
            
            new webpack.DefinePlugin({
                'process.env': {
                    NODE_ENV: env.NODE_ENV === 'development' ? '"development"' : '"production"' // 这里是双冒号
                }
            }),
        ]
    }
}

将package.json的script修改一番

  "scripts": {
    "dev": "webpack-dev-server --mode development --env.NODE_ENV=development",
    "build": "webpack --mode production --env.NODE_ENV=PRODUCTION"
  },

控制台 npm run dev
自动打开默认浏览器，默认8000端口

控制台 npm run build
编译在src的dist的文件中(包含index.htm和index.js)

webpack 4.x + Vue基础配置，强化对vue-cli的认识_第2张图片

image

webpack 4.x + Vue最基础配置，保证能启动和编译，距离vue-cli的webpack模式还差得远，但在不断学习和完善，也会不断更新...敬请期待

日后也会更新parcel + vue的配置文档
parcel官网

本项目的代码在GitHub的demo_02

webpack 4.x + Vue基础配置，强化对vue-cli的认识

坑：全局webpack版本为3.x, 而项目为4.x

初始化 package.json

第一步 设置package.json的编译字段

webpack添加了两个方便的点 --mode 和 --env.NODE_ENV

第二步 简单启动编译vue项目文件