基于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)环境
- 基于webpack和vue.js搭建开发环境
- 详解基于webpack和vue.js搭建开发环境
- 基于webpack和vue.js搭建开发环境
- 基于webpack和vue.js搭建开发环境(修改文章列子几个小错误)
- 基于mac下前端开发基本环境搭建 VSCode + git + node.js + npm+ webpack + vue-cli4 + nrm + yarn
- Vue学习笔记(十五)——搭建基于webpack的vue开发环境
- 基于webpack和vue.js搭建开发环境
- FE - 走向Node与Webpack 之路 - Vue 开发环境搭建
- windows环境下搭建vue+webpack的开发环境
- 用 Webpack 来搭建 Vue.js 的开发环境
- Windows环境搭建VUE前端开发环境-安装VUE+webpack
- Webpack+vue+element逐步搭建开发环境
- 从零开始,搭建基于webpack的react开发环境
- 使用webpack搭建vue开发环境
- 使用vue-cli+webpack搭建VUE开发环境
- 基于Webpack搭建React开发环境
- 基于webpack和vue.js搭建的H5端框架(其实主要用于Hybrid开发H5端框架,但是依然能够作为纯web端使用)
- 搭建vue2.x+webpack简易开发环境
- windows环境下搭建vue+webpack的开发环境
- webpack+搭建vue开发环境配置(二)