优雅配置vue项目，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=production 设置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.<YOUR VARIABLE> 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')
    }
  }
}
复制代码

设置NODE_ENV环境也能够借鉴如下网页文章 webpack4.0 npm script 使用 --mode development 设置开发模式和生产模式

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

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

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

npm i -D vue vue-loader

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

代码以下

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
<template>
    <div class="test">{{text}}</div>
</template>
<script>
    export default {
        data(){
            return {
                text:'hello webpack111!！！'
            }
        }
    }
</script>
<style>
    .text{
        color: #999;
    }
</style>
复制代码

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

js的ES6化，css和图片

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

• 疑问一、若是不明白babel-core babel-loader babel-preset-es2015的区别和联系能够点击查看一下👇大神的文章

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

• 疑问二、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的webpack模式还差得远，但在不断学习和完善，也会不断更新...敬请期待

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

本项目的代码在GitHub的demo_01