webpack4+vue项目搭建

1.进行初始化

npm init

注意：在进行此步骤中，将入口js从index.js更改为main.js

2.安装webpack webpack-cli

webpack4后，需要安装后者

3.配置webpack

3.1创建webpackconfig.js

3.2 配置出口和入口

//webpackconfig.js目录下
const path = require('path')
module.exports = {
    entry: path.join(__dirname, './src/main.js'),//入口文件
    output: {
        path: path.join(__dirname, './dist'), //出口（打包后）文件路径
        filename: 'bundle.js' //出口（打包后））文件名
    }
}

4.创建文件夹：

注意：dist文件夹用来存放打包后的文件；

5.配置pagkage.json

在secipts中，添加dev(可自己起名字)，添加：

"dev":"webpack --mode production"

6.安装webpack-dev-server

在终端中输入：npm i webpack-dev-server -D

注意：通过npm下载第三方模块

指令：npm i 包名参数[-g| -S/–save|-D]

-g：当我们安装的模块，是要作为命令行工具来使用的时候，一般都是-g全局安***r> -S：当我们安装的模块，要打包到目标文件中时，我们用-S安装，-S安装叫做运行环境依赖
-D：叫做开发环境依赖，当我们安装的模块，仅仅时用来协助开发的时候，这个模块就要使用-D安装
-S 在项目运行时使用，
-D 在项目开发时使用。

7.因为前者需要引用本地的webpack，所以本地安装webpack

在终端输入：npm i webpack -D
安装完成后，可以在package.json中看到

配置pageage.json：

注意：webpack-dev-server 和webpack用法相同

	"bulid": "webpack --mode production",
	"dev": "webpack-dev-server --open --port 8088"

注意：此工具打包后生成的bundle.js不在我们此前配置的./dist目录下，而是暂存在一个内存中，并且被认为时当前网站的根目录下

8.安装处理css的依赖

8.1 在终端中输入指令：npm i css-loader style-loader -D

8.2配置webpackconfig.js文件

在webpack.config.js中添加


 module: {//专门用于配置所有的第三方模块的loader加载器
        rules: [
            {test: /\.css$/, use: ['style-loader', 'css-loader']}
        ]
    }

9.安装处理图片和文字的依赖

9.1 在终端中输入指令：npm i url-loader -D

9.2 配置webpackconfig.js文件

添加：

 module: {//专门用于配置所有的第三方模块的loader加载器
        rules: [
            {test: /\.css$/, use: ['style-loader', 'css-loader']}，
             {test: /\.(jpg|jpeg|gif|png|)$/, use: 'url-loader'},//图片
        {test: /\.(otf|eot|svg|ttf|woff|woff2)$/, use: 'url-loader'},//文字
        ]
    }

10.安装css预处理依赖

10.1less安装：npm i less less-loader -D （less-loader内部需要依赖less）

10.2scss安装：npm i node-sass sass-loader -D （sass-loader内部需要依赖node-sass）

10.3配置webpack.config.js

 {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
 {test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']},

11.安***able-loader(用来处理ES6代码)

		1.在终端输入：npm i babel-loader @babel/core -D
		2.npm i @babel/plugin-transform-runtime @babel/runtime @babel/plugin-proposal-class-properties @babel/preset-env  -D
		注意：一共六个包

安装完毕后

项目根目录（即webpack.config.js同一级目录）下新建一个babel配置文件：.babelrc

然后进行配置：

{
    "presets": ["@babel/preset-env"],
    "plugins": [
        "@babel/plugin-transform-runtime",
        "@babel/plugin-proposal-class-properties"
    ]
}

最后，像之前一样在webpack配置文件中新增一条rule

{test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}

exclude的意思是，除了node_modules下的js文件，其他js都使用babel-loader解析，原因是，node_modules下js文件太多，都打包耗费性能，并且没必要打包，打包之后最终生成的代码会出错。

12.安装Vue

1.在终端输入：
npm i vue -S

13.安装vue所需插件

1.在终端输入
npm i vue-loader vue-template-compiler -D
2.进行配置
在webpack.config.js中添加：

{test: /\.vue$/, use: 'vue-loader'}

const VueLoaderPlugin = require('vue-loader/lib/plugin')

然后配置节点：

plugins:[
    new VueLoaderPlugin()
]

注意：15.X以后需要引用

最后webpack.config.js内部结构如下：

14.安装管理路由插件

在终端中输入：npm i vue-router -S

最后一个Vue项目的准备工作就准备好了
目录如下：

自己备用，供人参考，欢迎交流，如有错误，请指正！！！