npm.taobao.org(淘宝镜像)： npm config set registry https://registry.npm.taobao.org
还原npm仓库： npm config set registry https://registry.npmjs.org
查看配置成功： npm config get registry
#介绍
本地安装 vs 全局安装
npm init -y // 初始化项目
npm 是node三个重要功能之一的包管理器
webpack3(2017)、webpack4(2018/2/25)
#命令
-D => --save-dev（开发） -S => -save（正式） -g => -global i => install
npm install --save-dev webpack (开发环境) // <=> npm install -D webpack
npm install --save webpack (生产环境) // <=> npm install -S webpack
npm install --save-dev webpack@<version>(版本) // @next
npm uninstall 模块 // 删除模块
npm list // 查看安装的模块
npm i npm@latest -g // 更新npm到最新版本
webpack(npm webpack-cli -g/ 4.0)
node -v // node版本
npm -v // npm版本
npm install vue-cli -g // 安装vue脚手架
vue -V // vue-cli 版本
npm view 包名 version/npm info 包名 ; npm ls 包名/npm ls包名 -g
#文件
webpack.config.js
```
devServer:{
contentBase: path.resolve(__dirname, 'dist'),
host: 'localhost',
compress: true,
port: 1718
}
```
package.json(webpack-dev-server热更)
```
"server": "webpack-dev-server"
```
#插件（项目名称不能为"webpack"）（使用npm install -D webpack-cli webpack，需全局安装 并且项目内部安装 webpack和webpack-cli ）
html：html-webpack-plugin
css：style-loader-css-loader、extract-text-webpack-plugin（分离）（ sass-loader node-sass）、postcss-loader-autoprefixer（前缀）
js：uglifyjs-webpack-plugin
图片： file-loader、url-loader、html-withimg-loader
1.1. CSS文件打包（引入js文件）
style-loader css-loader // url()等、将css插入到页面的style标签
css的三种引入法
```
module:{
rules:[
{
test:/.css$/,
use:['style-loader','css-loader']
}
]
},
```
```
module:{
rules:[
{
test:/.css$/,
loader:['style-loader','css-loader']
}
]
},
```
```
module:{
rules:[
{
test:/.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader"
}
]
}
]
},
```
1.2. CSS从js文件分离和图片路径问题
extract-text-webpack-plugin
const extractTextPlugin = require("extract-text-webpack-plugin");
new extractTextPlugin("/css/index.css");
module:{
rules: [
{
test: /.css$/,
use: extractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},{
test:/.(png|jpg|gif)/ ,
use:[{
loader:'url-loader',
options:{
limit:500000, // 文件大于是base64
outputPath:'images/' // 图片输出路径
}
}]
}
]
},
// 打包路径错误
var website ={
publicPath:"http://192.168.1.108:1717/"
}
output.publicPath:website.publicPath
1.3. 消除未使用的CSS
purifycss-webpack purify-css
const glob = require('glob');
const PurifyCSSPlugin = require("purifycss-webpack");
new PurifyCSSPlugin({
//这里配置了一个paths，主要是需找html模板，purifycss根据这
个配置会遍历你的文件，查找哪些css被使用了。
paths: glob.sync(
path.join(__dirname, 'src/*.html')),
}),
用这个插件必须配合extract-text-webpack-plugin这个插件,这个插件已经被废弃了，取而代之的是 mini-css-extract-plugin
1.4. Sass转css
sass-loader node-sass (前者依赖于后者)
{
test: /.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader"
}]
}
分离情况
{
test: /.scss$/,
use: extractTextPlugin.extract({
use: [{
loader: "css-loader"
}, {
loader: "sass-loader"
}],
// use style-loader in development
fallback: "style-loader"
})
}
1.5. css3添加前缀
postcss-loader autoprefixer
2. JS文件打包
uglifyjs-webpack-plugin
UglifyJS Webpack Plugin // 压缩代码 中文文档
const uglify = require('uglifyjs-webpack-plugin');
plugins:[
new uglify()
],
3. HTML文件打包
html-webpack-plugin
4. 图片
(1). css图片(background: url())
file-loader(解决路径问题) url-loader(图片多时转base, 内置了file-loader)
{
test:/.(png|jpg|gif)/ ,
use:[{
loader:'url-loader',
options:{
limit:500000 // 图片超过多大转base64
}
}]
}
(2). html图片(<img src="">)
html-withimg-loader
{
test: /.(htm|html)$/i,
use:[ 'html-withimg-loader']
}
7. Vuex
vuex (vue的状态管理)
8. Element-UI
element-ui
在main.js 中引入:
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI);
①.config/index.html打包路径设置
assetsRoot:构建输出目录 也就是构建后的东西都扔这里
assetsSubDirectory:资源子目录 除了index.html，其余的js img css都分在这里
assetsPublicPath:项目目录 一个杠杠 啥意思呢，是根目录的意思
②.vue项目打包之后页面空白解决办法/f5刷新
router文件的模式由history改为hash
https://blog.csdn.net/xr510002594/article/details/83752372
npm i -g live-server (热加载) => live-server
只定端口（live-server --port=4040）
webpack.config.js配置文件报错：The 'mode' option has not been set （ "dev": "webpack --mode development", "build": "webpack --mode production）
CMD命令
cd mkdir目录 touch文件 clear/cls(vscode)
{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
解决方法：
找到你的工程文件夹里的 YourProName
ode_modulesvue-loaderlib emplate-compilerindex.js
//将以下代码
if (!isProduction) {
code = prettier.format(code, { semi: false, parser: 'babylon' })
}
//修改为：
if (!isProduction) {
code = prettier.format(code, { semi: false, parser: 'babel' })
}
来源：https://blog.csdn.net/u011280778/article/details/88107472