使用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、安装依赖
-
安装babel 系列依赖(主要用于javascript代码向后转换兼容)
npm install @babel/coe @babel/preset-env --save-dev
-
安装各种加载器
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代码
-
创建.babelrc,初始化babel配置
{ "presets": [ [ "@babel/preset-env", { target: { "chrome": "58", "ie": "11" } } ] ] }
-
创建postcss.config.js初始化postcss配置
module.exports = { plugins: [ [ "postcss-preset-env", { browsers: "last 2 versions" } ] ] }
-
创建.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