webpack4.x 快速搭建vue开发环境

webpack version: 4.x

1. 初始化项目(如果不需要特殊的设置可以加上 -y 参数可直接生成 package.json) macOS和linux需要加sudo

npm init

2. 安装各种需要的包和loader

npm install webpack  webpack-cli webpack-dev-server babel-core babel-loader babel-preset-es2015 babel-preset-stage-0 css-loader style-loader file-loader url-loader html-webpack-plugin vue vue-router vue-loader vue-template-compiler   --save-dev

这其中包括了css js html image vue 各种文件的 loader

3. 新建 webpack.config.js 文件(名称必须是这个) 并且 配置这个文件

/**
 * webpack config file
 */


const HtmlWebpackPlugin = require("html-webpack-plugin");

const path = require("path");

const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
    entry: "./src/index.js",
    output: {
        filename: 'bundle.js',
        path: path.resolve("./dist"),
    },
    module: {
        rules: [
           // .js 文件处理 loader
            {
                test: /.js$/,
                use: 'babel-loader',
                exclude: /node_modules/
            },
           // .css 文件处理 loader
           {
                test: /.css$/,
                use: ['style-loader', 'css-loader']
            },
           // 图片文件处理 loader
            {
                test: /.(jpg|png|gif|jpeg)/,
                use: 'url-loader?limit=8192'
            },
            // .vue 文件处理 loader
            {
                test: /.vue$/,
                use: 'vue-loader'
            }
        ]
    },
    
   // 插件
    plugins: [
        new HtmlWebpackPlugin({
            templalte: './src/index.html'
        }),
        new VueLoaderPlugin(),
    ],
    mode: 'production'
};

4. 在 package.json 文件中配置scripts

 "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --mode development"
  },

5. 启动测试,看服务是否启动成功,如果成功,到浏览器中访问提示的url 一般是 http://localhost:8080

npm run dev