持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第14天，点击查看活动详情
修改npm包的路径：
1.设置 npm 缓存路径:
npm config set cache "O:\nodereps\node_cache"
2.设置 npm 全局包下载路径:
npm config set prefix "O:\nodereps\node_global"
验证npm安装：
1.npm config list
存在：cache = "O:\nodereps\node_cache"
prefix = "O:\nodereps\node_global"
ok;
1.webpack搭建：（静态模块化打包工具）
webpack -v（检测是否安装webpack）
webpack安装：
npm install webpack@3.6.0 -g (@版本， -g全局安装)
webpack不是内部指令：
-
确保nodeJS已安装
-
找到nodejs目录,node_global、node_cache文件夹，没有新建
在用户变量Path中增加：
O:\nodereps\node_global\node_modules
环境变量Path中增加：
O:\nodereps\node_global
关闭cmd命令，重新运行。
局部安装：
开发是依赖，项目打包后不需要：
npm install webpack@3.6.0 --save-dev
2.webpack 使用：
在js中使用模块化开发，
在./src/main.js中导入模块并使用。
然后webpack ./src/main.js ./dist/bundle.js（将 main.js 打包为bundle.js ）
在html中引入 bundle.js
--文件夹
----dilt
------bundle.js(打包js)
----src
------main.js(入口js)
------info.js(模块化js)
----index.html(页面html,引入bundle.js)
----webpack.config.json(配置webpack的打包入口和出口，需要npm init 添加node包)
----package.json（npm init 生成的文件）
配置：
webpack.config.json:
创建webpack.config.json文件与根目录：（输入 npm init 会创建出package.json)
const path=require('path')//这里是node的包（马上创建package.json npm init）
module.exports={
entry:'./src/main.js',//入口
output:{//输出口
path:path.resolve(__dirname,'dist'),//路径（动态获取文件）resolve是在path中的一个方法，__dirname是获取上下文的路径
filename:'bundle.js'//文夹名
}
}
将webpack ./src/main.js ./dist/bundle.js 打包方法改为： webpack (省略后面的入口和出口)
package.json:
{
"name": "meet",
"version": "1.0.0",
"description": "index.js",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"author": "",
"license": "ISC",
"dependencies": {
"webpack": "^3.6.0"
}
}
在scripts 设置脚本 build: 可以将 webpack 打包命令改为 npm run build
webpack局部安装后：
如果需要使用本地的webpack打包，就在package.json配置脚本，运用npm run build打包（他会先使用寻找本地的webpack,再寻找全局的），若不配置则：node_modules\webpack>webpack ../../src/main.js ../../dist/bundle.js
在终端使用 webpack 命令打包一定使用的是全局的webpack工具。
3.webpack使用css:
require('./css/normal.css')在入口js中导入css文件。
需要先安装loader(是webpack一个非常核心的概念，不同的文件格式 有不同的loader);
npm install --save-dev css-loader 安装css的loader
npm install style-loader --save-dev 安装style的loader
在 webpack.config.js中配置：
module.exports={
entry:'./src/main.js',//入口
output:{//输出口
path:path.resolve(__dirname,'dist'),//路径（动态获取文件）resolve是在path中的一个方法，__dirname是获取上下文的路径
filename:'bundle.js'//文夹名
},
module:{
rules:[
{
test:/\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
}
]
}
}
添加module属性，创建rules规则。
css打包报错：TypeError: this.getResolve is not a function （css-loader,style-loader版本过高）：
手动更改package.json 中版本：
"css-loader": "^3.3.0", "style-loader": "^1.0.0"
npm install 和 npm dev 依次执行
安装JQ:
npm install jquery --save-dev 安装
import $ from 'jquery'; 引入
4.webpack使用less:
在webpack官网上查找 样式 less loader.
npm install --save-dev less-loader less（有两个，一个是 less-loader，一个是less包编译less）
{ 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 }] }
5.webpack使用url链接文件:
在webpack官网上查找 文件 url loader.
npm install --save-dev url-loader
{ test: /\.(png|jpg|gif)$/, use: [ { loader: 'url-loader', options: {
//当文件小于limit (b)配置时，会转换为base64
//当文件大于limit时，需要安装file loader limit: 8192
fallback: require.resolve('file-loader'),
encoding: "base64",
} } ] }
使用文件时文件大于limit时，需要安装file loader
npm install --save-dev file-loader
{ test: /\.(png|jpg|gif)$/, use: [ { loader: 'file-loader', options: {
//name文件地址，文件名：在打包文件下创建一个img，
//打包后的文件名为：原文件名 + 8位hash值 + 文件扩展名
name: 'img/[name].[hash:8].[ext]'
} } ] }
它会将文件打包到dilt文件夹中：
所以需要在webpack.config.js中：output：{}增加 publicPath:'dilt/'（//为url路径添加dilt/）
6.webpack es6转为es5:
安装：（ babel-loader，babel-core， babel-preset-es2015（ babel-preset-env））
npm install babel-loader@7 babel-core babel-preset-es2015 --save-dev
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/, //排除
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
// presets: ['@babel/preset-env']（会去寻找 .babelrc文件）
}
}
}
.babelrc:
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]//市场份额大于1%，最后两个版本，IE<=8不考虑
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"]
}
