前端webpack+node+vue（二）

在工程目录创建 webpack.config.js 文件

    
// 这里声明的‘path’与下面的‘__dirname’拼接起来，成为绝对路径
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

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

config = {
    target: "web",
    mode: 'development',
    // 声明入口文件
    //‘__dirname’ 代表当前文件所在目录地址，在这里也就是根目录
    entry: path.join(__dirname,'src/index.js'),  
    // 声明出口文件
    output:{
        // 输出文件名
        filename: 'bundle.js',
        // 输出文件的路径
        path: path.join(__dirname,'dist')
    },
    module: {
        rules: [
            {
                test:/\.vue$/,
                loader: 'vue-loader'
            },
            // {test:/\.jsx$/,loader: 'babel-loader'},
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader"
                ]
            },
            {
                test:/\.(gif|jpg|jpeg|png|svg)$/,
                use:[{
                    loader: 'url-loader',
                    options: {
                        // 图片大小小于1024就转为base64,从而减少http请求
                        limit: 1024,
                        name: '[name].[ext]'
                    }
                }]
            },
            {
                test:/\.styl/,
                use:[
                    "style-loader",
                    "css-loader",
                    "stylus-loader"
                ]
            }
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            "process.env": {
                NODE_ENV: isDev? '"development"' : '"production"'
            }
        }),
        new HtmlWebpackPlugin(),
        new VueLoaderPlugin()
    ]
}


if (isDev){
    config.devtool = "#cheap-module-eval-source-map"
    config.devServer = {
        port: 9000,
        host: "0.0.0.0",
        overlay: {
            errors: true,
        },
        hot: true,
    }
    config.plugins.push(
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
    )
}

module.exports = config

上述配置如有疑问，在视频中有具体解释 https://www.imooc.com/video/16405 

接着修改 package.json 中的 scripts 项，添加下面两行代码（参考我的 package.json 配置）

"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"

 scripts 项是自定义执行命令行，可以通过在终端运行 npm run build（打包）和 npm run dev（开启预演服务）

package.json 

{
  "name": "hello_world",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-loader": "^8.0.5",
    "cross-env": "^5.2.0",
    "css-loader": "^2.1.0",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.5.0",
    "postcss-loader": "^3.0.0",
    "style-loader": "^0.23.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "url-loader": "^1.1.2",
    "vue": "^2.6.8",
    "vue-loader": "^15.7.0",
    "vue-template-compiler": "^2.6.8",
    "webpack": "^4.29.6",
    "webpack-dev-server": "^3.2.1"
  },
  "devDependencies": {
    "webpack-cli": "^3.2.3"
  }
}