基于webpack搭建vue的开发环境

基于webpack搭建vue的开发环境

一、
1.安装node.js
(查看是不是淘宝镜像，不是改成淘宝镜像）
查看
npm config list
改成淘宝镜像
npm config set registry https://registry.npm.taobao.org
2.如何创建目录并初始化package.json
npm init -y
3.安装webpack和webpack-cli
npm install webpack webpack-cli --save-dev
4.运行webpack测试
CommonJS规范：基于服务端模块化规范，node产出
抛出：modules.exports
引入：require
5.webpack支持的文件类型
默认只支持JS和json文件的引入
6.webpack配置文件
默认配置文件名：webpack.config.js
//引入webpack,主要用于对webpack内置插件调用时使用
const webpack = require(‘webpack’)
//引入path，对路径进行处理
const path = require(‘path’)

//创建一个配置对象
const config = {
//配置入口
entry: ‘./src/main.js’,
//配置出口
output: {
//出口路径
path:path.resolve(__dirname,‘dist’),
//出口文件名
filename:‘bundle.js’
}

}

module.exports = config;
7.配置各种loader(文件解析器)
解析css的loader
解析图片 file-loader,url-loader
解析ES6/7/8/9/10… babel
第一步：npm install --save-dev babel-loader @babel/core @babel/preset-env
第二步：在项目根目录下创建一个.babelrc文件，并写入
{
“presets”: ["@babel/preset-env"]
}
第三步：配置loader
module: {
rules: [
{ test: /.js$/, exclude: /node_modules/, loader: “babel-loader” }
]
}
9.webpack核心概念
entry：入口：指向项目执行的主入口
output:出口：构建输出的文件路径和文件名
loader:j加载器：转换webpack不识别的文件类型
plugins:为了扩展webpack的功能
mode 切换开发环境(development)还是线上(production)环境