2020 webpack 搭建vue项目初始化项目新建一个目录，然后初始化项目在根目录新增package.json中加入

初始化项目

新建一个目录，然后初始化项目

npm init

在根目录新增package.json中加入以下依赖包

{
  "name": "vueCMS",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --open --config webpack.dev.config.js",
    "build": "webpack --config webpack.product.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
  	// 处理CSS兼容
    "autoprefixer": "^8.0.0",
    //babel的依赖包
    "babel-core": "^6.26.3",
    "babel-loader": "^8.2.2",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    // 插件：每次build的时候清空旧文件
    "clean-webpack-plugin": "^3.0.0",
    // css处理
    "css-loader": "^5.0.1",
    
    // 处理CSS兼容
    "postcss-loader": "^4.1.0",
    // 添加sass支持
    "sass-loader": "^10.1.0",
    "node-sass": "^5.0.0",
    
    "style-loader": "^2.0.0",
    //vue相关
    "vue": "^2.6.12",
    "vue-html-loader": "^1.2.4",
    // 添加vue-loader
    "vue-loader": "^15.9.5",
    "vue-template-compiler": "^2.6.12",
    // 添加webpack打包
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12",
    // 提供web容器，可在本地访问http://localhost:port
    "webpack-dev-server": "^3.11.0",
    // 提供配置文件的合并
    "webpack-merge": "^5.4.0"
  },
  "dependencies": {
    "html-webpack-plugin": "^4.5.0"
  }
}

安装以上依赖

npm i

配置bable 在根目录下新建一个.babelrc文件

{
    "presets": [
        "@babel/preset-env",
    ]
}

在根目录增加一个postcss.config.js

module.exports = {
    plugins: {
        'autoprefixer' : {browsers: 'last 5 version'}
    }
}

不能直接使用 const merge = require('webpack-merge') 原因：blog.csdn.net/u011280778/…

在根目录新建一个webpack.base.config.js作为基础webpack的配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
	// 入口文件
    entry: './src/main.js',
    output: {
        filename: 'bundle.[hash].js',
        path: path.join(__dirname, '/dist')
    },
    module: {
    	// 配置相应的规则
        rules: [
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'postcss-loader',
                    'sass-loader',
                ],
            }, {
                test: /\.vue$/,
                // use: 'vue-loader'
                loader: 'vue-loader'
            },
        ]
    },
    // 配置相应的插件
    plugins: [
        new HtmlWebpackPlugin({
            // template: path.join(__dirname, './src/index.html'),
            filename: 'index.html',
            template: './src/index.html'
        }),
        new CleanWebpackPlugin(),
        new VueLoaderPlugin()
    ]
};

在根目录下新建webpack.dev.config.js文件作为开发环境的配置

const {merge} = require('webpack-merge');
const baseConfig = require('./webpack.base.config.js');

module.exports = merge(baseConfig, {
    //设置为开发模式
    mode: 'development',
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist',
        port: 9527
    }
})

在根目录下新建webpack.product.config.js文件作为生产环境的配置

const {merge} = require('webpack-merge');
const baseConfig = require('./webpack.base.config.js');

module.exports = merge(baseConfig, {
    mode: 'production'
})

在根目录新建src目录，和index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

在src目录新建index.scss文件，测试scss文件

$blog-color-red: #ff0000;

.hello {
    color: $blog-color-red;
}

在src新建入口文件main.js和App.vue

main.js

import Vue from 'vue';
import App from './App.vue';
import './index.scss';

new Vue({
  el: '#root',
  render: h => h(App),
});

App.vue

<template>
  <div id="app">
    1231231321---{{title}}
  </div>
</template>

<script>
export default {
  name: "app",
  data(){
    return {
      title:123123
    }
  }
};
</script>

<style scoped>
</style>

运行程序

npm run start

打包文件

npm run build

打完收工

示例

github地址 https://github.com/mengxingedu/webpack_vue