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
複製程式碼