使用webpack手动创建vue2项目

使用webpack手动创建vue2项目

1、创建项目文件夹

2、初始化项目
npm init 得到package.json

 注：需首先安装node

3、安装webpack
npm install webpack webpack-cli --save-dev
自动修改package.json，增加node_modules文件、package-lock.json文件

npm install webpack-dev-server --save-dev (实现代码热更新功能)
4、安装依赖

1. 安装babel 系列依赖（主要用于javascript代码向后转换兼容）

   npm install @babel/coe @babel/preset-env --save-dev

2. 安装各种加载器
   npm install babel-loader --save-dev
   npm install style-loader --save-dev (style标签方式插入包含的样式)
   npm install css-loader --save-dev (处理@import和url())
   npm install url-loader --save-dev (将文件转换为base-64 URL，减少HTTP请求次数)
   npm install file-loader --save-dev
   npm install postcss-loader postcss --save-dev (处理浏览器样式兼容)
   npm install vue-loader --save-dev
   npm install vue-template-compiler --save-dev

5、安装webpack插件
npm install html-webpack-plugin --save-dev
npm install mini-css-extract-plugin --save-dev (把散落的样式提取生成一个css文件，注：与style-loader的区别)
6、安装vue、vuex
npm install vue
npm install vuex
7、创建html文件及配置文件
在当前根目录创建index.html，初始化HTML代码

1. 创建.babelrc，初始化babel配置

    { 
   	 "presets": [
   	 		[
   	 			"@babel/preset-env",
   	 			{
   					target: {
   						"chrome": "58",
   						"ie": "11"
   					}
   				}
   	 		]
   	 ] 
    }
   

2. 创建postcss.config.js初始化postcss配置

    module.exports = { plugins: [
    	[
    		"postcss-preset-env",
    		{
   			browsers: "last 2 versions"
   		}
    	]
    ] }
   

3. 创建.gitignore
   node_modules
   .vscode
   .idea

8、package.json的配置如下

{
  "name": "vue2manually",
  "version": "1.0.0",
  "description": "manual create vue2",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server",
    "build": "webpack --mode=development"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.15.5",
    "@babel/preset-env": "^7.15.6",
    "babel-loader": "^8.2.2",
    "css-loader": "^6.2.0",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.2",
    "mini-css-extract-plugin": "^2.3.0",
    "postcss-loader": "^6.1.1",
    "style-loader": "^3.2.1",
    "url-loader": "^4.1.1",
    "vue-loader": "^15.9.8",
    "vue-style-loader": "^4.1.3",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^5.52.1",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.2.1"
  },
  "dependencies": {
    "vue": "^2.6.14",
    "vuex": "^3.6.2"
  }
}

9、创建webpack.config.js文件，编写webpack配置

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin.js') 
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

let config = {
    entry: path.resolve(__dirname, './src/main.js'),
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "[name].js"
    },
    mode: 'development',
    resolve: {
        extensions: ['.js', '.vue', '.json'], // import引用文件省略后缀
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
   devServer: {
        static: { // 配置静态资源存放位置
            directory: __dirname // 根目录下文件
        },
        open: true
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: "vue-loader"
            },
            {
                test: /\.js$/,
                use: ['babel-loader'],
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    // 'style-loader', // 注：style-loader、MiniCssExtractPlugin.loader不能同时使用
                    "css-loader"
                    // {
                    //     loader: "postcss-loader",
                    //     options: {
                    //         sourceMap: true,
                    //         postcssOptions: {
                    //             path: 'postcss.config.js'
                    //         }
                    //     }
                    // }
                ]
            },
            {
                test: /\.(gif|png|svg|jpe?g)(\?.*)?$/,
                loader: "url-loader", // 建议使用url-loader，不用file-loader，减少http请求次数
                options: {
                    limit: 1024
                }
            },{
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: "url-loader",
                options: {
                    limit: 10240
                }
            }
        ]
    },
    optimization: {
        minimize: true,
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, './index.html'),
            inject: 'body'
        }),
        new MiniCssExtractPlugin({
            filename: 'main.css' // 散落样式提取为main.css文件，通过link标签加入html文件
        }),
        new VueLoaderPlugin() //  手动创建项目，需在webpack中使用vue-loader自带插件
    ]
}
module.exports = config;

10、编写demo,进行测试
新建src目录，创建main.js、App.vue文件，编写main.js以下代码：

import Vue from 'vue'
import App from './App'
new Vue({
    el: '#app',
    components: { App },
    template: '<App/>'
})

11、执行脚本
npm run start