本着想接触webpack的原则, 在不使用vue脚手架的情况下, 从0到1,构建一个vue的开发项目
-
安装node, 官网下载, 安装后 node -v 可查看版本号,即为成功
-
新建一个文件夹, 在此文件夹中, npm init -y 会生成一个 package.json 配置的文件
3.npm 安装依赖, 这里又学到了新东西,
--save || -S 这种安装方式, 会作用在发布后, 例如vue ,就是这种安装方式, 因为打包上线后,vue文件还是需要被使用的.
--save-dev|| -D 这种方式只在开发阶段有效, 想webpack, 只在开发时,打包使用, 上线后, 不会再用到webpack.
两者都会将下载的npm依赖包,注册在 之前的package.json的文件中
--save|| -S 方式下载的文件,在"dependencies"下,
--save-dev|| -D 方式下载的文件,在"devDependencies"下,
4.尝试了一下,不写 --save或者--save-dev ,npm会默认注册在"dependencies"下
5.下载项目基础的必须依赖
6.在根路径配置一个webpack.config.js的文件
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HTMLPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const isDev = process.env.NODE_ENV === 'development';
const config = {
entry: path.join(__dirname, 'src/index.js'), // 入口文件 用path.join(__dirname, 'src/index.js')将路径拼接为绝对路径
output: {
filename: 'bundle.js', // 文件输出
path: path.join(__dirname, '/dist')
},
plugins: [
new VueLoaderPlugin(),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: isDev ? '"development"' : '"production"'
}
}),
new HTMLPlugin() // 处理html模版
],
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader' // 处理以.vue结尾的文件
},
{
test: /\.css$/, // 处理css文件
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(gif|jpg|jpeg|png|svg)$/, // 处理图片文件
use: [
{
loader: 'url-loader',
options: {
limit: 1024,
name: '[name].[ext]'
}
}
]
}
]
}
}
if(isDev){
config.devtool = '#cheap-module-eval-source-map' // 调试代码时可以看到自己原本的代码，而不是编译后的
config.devServer = {
port: 8000,
host: '0.0.0.0',
overlay: {
errors: true // 将webpack编译的错误显示在网页上面
},
open: true // 在启用webpack-dev-server时，自动打开浏览器
}
config.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
)
}
module.exports = config;
7.构建一个熟悉的vue结构, 根目录下新建src文件夹,src文件夹下添加 assets 资源文件夹,views 页面文件夹, App.vue, main.js
8.编写app.vue文件
<template>
<div id="app">hello world</div>
</template>
<script>
export default {
data() {
return {}
}
}
</script>
<style></style>
9.编写main.js
import Vue from "vue";
import App from "./App.vue";
new Vue({
render: h => h(App)
}).$mount("#app");
10. 在package,json中配置项目的运行命令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"cross-env NODE_ENV=production webpack --config webpack.config.js",
"server":"cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
},
11 . 运行npm run server
-
报错,提示, webpack-dev-server webpack-cli 不是外部或内部命令, 也不是可运行的程序
-
npm install webpack-dev-server webpack-cli
-
运行npm run server
-
继续报错 Error: Cannot find module 'webpack-cli/bin/config-yargs'
16.查资料,发现是 webpack-cli和webpack-dev-server的版本冲突, 尝试卸载webpack-dev-server 3 的版本, 改为安装 2 的版本
17.卸载webpack-dev-server: npm uninstall webpack-dev-server
18.安装网上所说的指定版本 npm install webpack-dev-server@2.9.7 --save-dev
19.再次运行, npm run server ,报错依旧, Error: Cannot find module 'webpack/bin/config-yargs' 这次是webpack找不到了, 牛逼, 很好, ,[当场去世]
-
查资料, 还是webpack和webpack-dev-server的版本冲突, giao. 生气, 我把他俩全卸载了. 然后找了一个网上别人的项目 ,按照他的版本配置的这两个鬼东西
-
再次运行, 出错, Error: Cannot find module 'webpack-cli/bin/config-yargs' 又回到第一步, 那就把webpack-cli也卸载,按照刚才两个的别人项目里的版本号下载webpack-cli
22.好了,不在冲突了, 版本号附上
- 运行, 报错,找不到 index.js文件
24.修改src/main.js为 index.js 运行不在报错, 但是页面没有显示, 楼主蒙蔽
25.之前的错误,应该是webpack.config.js配置问题
上一步也可替换为 将下图的index.js修改为 main.js也可成功运行
