安装webpack需要依赖node环境,下载地址为:https://nodejs.org/en/download/
node.js 的安装完成后
node.js 安装好后,就等于你安装好了node 和npm ,下面我们打开终端执行命令查看下：
node -v [查看node版本]
npm -v[查看npm版本
[图片上传中...(WechatIMG1304.jpeg-eb152b-1606100762422-0)]
[图片上传中...(WechatIMG1305.jpeg-b8fc7a-1606100793117-0)]
安装脚手架 https://cli.vuejs.org/zh/guide/installation.html
移除
npm uninstall -g @vue/cli
安装指定的版本
npm install -g @vue/[email protected]
# OR
yarn global add @vue/cli
vue --version
接口下来就是通过npm安装webpack了
在mac下依赖包要写入系统重要文件夹里，需要先获取root权限（如果不获取root权限会出错,这点非常重要），所以终端先执行如下命令：
$ sudo -s
执行后会出现小钥匙，输入你的密码然后在回车就可以了。
获取完root ，我们开始安装webpack ，执行如下命令：
-g 表示全局安装
npm install webpack -g
-save-dev 局部安装 可以指定版本号进行安装
npm install [email protected] --save-dev
1.初始化安装package.json
npm init
2.配置package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
}
3.创建webpack.config.js文件
const path = require('path')
module.exports = {
entry:'./src/main.js',
output:{
path: path.resolve(__dirname,'dist'),
filename:'bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}
}
4.安装挂载css插件 loaders
npm install --save-dev css-loader
npm install --save-dev style-loader
- 运行项目
npm run build
也可以
webpack src/main.js dist/bundle.js
webpack中文技术支持网站点击顶部的中文文档 https://www.webpackjs.com
第三步骤页面配置如图所示:
//6.如果安装了less文件需要安装
npm install --save-dev less-loader less
//webpack.config.js配置如下
{
test: /\.less$/,
use: [{
loader: "style-loader", // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader", // compiles Less to CSS
}]
}
//7如果加载url('../img/aaa.png')图片的话
npm install --save-dev url-loader
webpack.config.js配置文件
{
test: /\.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'url-loader',
options: {
// 当加载的图片, 小于limit时, 会将图片编译成base64字符串形式.
// 当加载的图片, 大于limit时, 需要使用file-loader模块进行加载.
limit: 13000,
name: 'img/[name].[hash:8].[ext]'
},
}
]
}
8.如果图片大于步骤7limit: 13000,的时候需要通过file-loader进行处理
npm install --save-dev file-loader
再次打包，就会发现dist文件夹下多了一个图片文件
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: 'dist/' //此处声明会将dist里面的图片加载出来否则路径不对
}
9.如果希望将ES6的语法转成ES5，那么就需要使用babel。
而在webpack中，我们直接使用babel对应的loader就可以了
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
webpack.config.js配置如下
{
test: /\.js$/,
// exclude: 排除
// include: 包含
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
}
10.后续是在实际项目中也会使用vue的，所以并不是开发时依赖
npm install vue --save
11.安装vue-loader和vue-template-compiler
npm install vue-loader vue-template-compiler --save-dev
webpack.config.js的配置文件：
{
test: /\.vue$/,
use: ['vue-loader']
}
导入vue配置文件后报错了, 参考了文档地址 https://blog.csdn.net/nightwishh/article/details/92799408
解决办法简单的是把vue-loader回到v14版本
"vue-loader": "^14.0.0",
12.在使用webpack-dev-server 的时候报错了
参考文档如下解决问题了:感谢作者
原因如下:
报错“Cannot find module 'webpack-cli/bin/config-yargs'”-之解决办法
去寻找适合webpack5的webpack-cli和webpack-dev-server，然而情况不是想象的那样，webpack5根本不与现有版本兼容，所以又把注意力转移到webpack4，我们不得不降低webpack版本从5到4，于是有了下面的版本配置，在删除node_modules包，及指定了以下package.json配置后，最初报错指令被成功执行
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
13.webpack配置分离
npm install webpack-merge --save-dev