webpack

webpack解决的问题
1：静态资源多，发起的二次请求多，导致网页速度慢。（合并文件，精灵图表，）
2：包之间的依赖关系复杂。（requireJS可以解决此问题）
什么是webpack：
是前端项目构建工具，是基于nodejs开发出来的。
webpack基于整个项目进行构建，gulp是基于任务进行构建（不适合大项目）。
全局安装：npm i webpack -g

---

webpack打包：
webpack 解决了浏览器兼容性问题。

webpack 需要打包的文件路径   打包后输出的文件路径（一般在dist文件里）
以上打包方法不常用。一般用如下方法：
先建webpack.config.js文件（在项目根目录下）。
然后：





    const path = require('path')
     module.exports={
    //入口，表示需要打包的文件路径
    entry:path.join(__dirname,'./src/main.js'),
    //文件打包后输出的路径
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js'//输出的文件名
    }
}

现在运行webpack即可打包
但是每次修改代码后都要重新用webpack命令打包，很不方便。
先在本项目安装webpack：
npm i webpack -D.(以上可以不在本地安装，但下面必须的。不然会报错)

---

此时使用webpack-dev-server工具。他会实时监听代码的变化，随时自动编译。
安装：npm i webpack-dev-server -D
然后在package.json里的scripts里配置：“dev”: "webpack-dev-server"即完成。
运行：npm run dev.
此时如果webpack是4.0会报错。

> [email protected] dev d:\xampp\htdocs\lianxi\wp\wp1
> webpack-dev-server

The CLI moved into a separate package: webpack-cli
Please install 'webpack-cli' in addition to webpack itself to use the CLI
-> When using npm: npm i -D webpack-cli
-> When using yarn: yarn add -D webpack-cli
internal/modules/cjs/loader.js:584
    throw err;
    ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:582:15)
    at Function.Module._load (internal/modules/cjs/loader.js:508:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object. (d:\xampp\htdocs\lianxi\wp\wp1\node_modules\webpack-dev-server\bin\webpack-dev-server.js:60:1)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `webpack-dev-server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\gyj\AppData\Roaming\npm-cache\_logs\2019-07-18T01_45_36_731Z-debug.log

d:\xampp\htdocs\lianxi\wp\wp1>npm i webpack -D
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for
[email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

根据错误提示安装 npm i -D webpack-cli
然后运行npm run dev.
成功后的package.js 的devDependencies包括如下文件：

 "devDependencies": {
    "webpack": "^4.36.1",
    "webpack-cli": "^3.3.6",
    "webpack-dev-server": "^3.7.2"
  }

成功后的项目可以在webpack的虚拟出来的服务器运行。而且此时项目里有两个bundle.js文件，一个是我们创建的，一个是webpack-dev-server创建的存在于项目根目录，但是看不见，实际上是保存在电脑内存里。在虚拟的服务器运行项目时，index.html 文件应该引入虚拟的bundle.js.

webpack-dev-server的参数，在package.json的scripts里：
–open：运行npm run dev时自动打开浏览器，
–port 3000:修改端口为3000
–contentBase src:设置默认打开浏览器时显示的是src的目录
–hot:（1）实现页面的局部刷新（2），只对修改的部分进行更新

"dev": "webpack-dev-server --open --prot 3000 --hot"

---

html-webpack-plugin
作用：（1）在内存里生成index.html页面，（2）自动将bundle.js引入到index，不需要再去人为引入。
(1)安装：npm i html-webpack-plugin -D
(2)导入：在webpack.connfig.js 里

const htmlWebpackPlugin = require('html-webpack	-plugin')

(3):配置：
在webpack.connfig.json 创建plugins数组：

plugins:[//配置插件节点
    //index.html页面的插件
    new htmlWebpackPlugin({
        //根据index.html文件生成。
        template:path.join(__dirname,'./src/index.html'),
        filename:'index.html'//生成的页面名字
    })
]

此时运行后，index.html文件里会自动引入bundle.js文件。

---

打包css文件：
webpack默认只能打包js文件，其他文件就先在webpack.package.json里查看匹配规则，如果有配置规则，就执行。否则报错。
所以在main.js 里import ‘./css/index.css’时会报错。

ERROR in ./src/main.js
Module not found: Error: Can't resolve './css/index.css' in 'D:\xampp\htdocs\lianxi\wp\wp2\src'
 @ ./src/main.js 2:0-24

（1）需要安装css加载器：style-loader和css-loader
npm i style-loader css-loader -D
（2）main.js里引入css文件
（3）webpack.config.js里配置：

module:{//配置第三方模块加载器
        rules:[//第三方模块匹配规则：
            {test:/\.css$/,use:['style-loader','css-loader']}
        ]
    }

打包less文件
下载：npm i less-loader -D
配置：{test:/\.less$/,use:['style-loader','css-loader','less-loader']}
还会报错，因为less-loader依赖于less,所以下载less
npm i less -D

打包scss文件
下载：npm i sass-loader -D(会报错，提示安装node-sass)
cnpm i node-sass -D(容易报错，一般用cnpm装)
配置：

{test:/.scss$/,use:[‘style-loader’,‘css-loader’,‘sass-loader’]}

打包图片：
下载：npm i url-loader file-loader -D
配置： {test:/\.jpg|jpeg|png|gif$/,use:'url-loader'}
配置带带参：{test:/.jpg|jpeg|png|gifKaTeX parse error: Expected 'EOF', got '&' at position 28: …oader?limit=632&̲name=[name].[ex…/,use:‘url-loader?limit=632&name=[hash:8]-[name].[ext]’}(带哈希和原名的路径)`
打包后，图片路径默认转成base64编码，
参数：limit:图片大小。如果比图片大，则还是base64，如果比图片大小小或等。则不再进行base64编码，但路径被以哈希的方式重命名。
我发现一个问题：我发现安装完以上两个loader后，node-sass会被卸载，虽然devDependencies里有，但是node-module里找不到node-sass文件。已经解决，在项目里直接删除node-module，然后npm i.

处理字体样式文件：

{test:/\.ttf|	eot|svg|woff|woff2$/,use:'url-loader	'}

webpack对js的打包，只支持一部分es6语法，如果有一些es6语法不支持，就会报错，这时需要安装babel插件和语法：
（1）npm i babel-core babel-loader babel-plugin-transform-runtime -D
cnpm i babel-preset-env babel-preset-stage-0 -D(这个最后用cnpm下载，npm 一般会出错)
（2）配置项：
{test:/.js$/,use:‘babel-loader’,exclude:/node_modules/}//排除node_module的js文件。
（3）创建babel的配置文件：.babelrc(项目根目录)
{
“presets”:[“env”,“stage-0” ],//语法
“plugins”:[“transform-runtime”]//插件
}

webpack中使用vue：
安装：npm i vue
main.js :
引入：（1）import Vue from ‘…/node_modules/vue/dist/vue.js’(导入包，最简单的方式)
（2）import Vue from ‘vue’（专业方式）//这种方法引入的是阉割版的vue。会报错需要再webpack.config.js里设置节点：

  resolve:{
            alias:{
                "vau$":"vue/dist/vue.js"//以vue结尾，指向vue.js文件。
            }
        }

完成

var vm = new Vue({
    el:"#app",
    data:{
        msg:'jack'
    }
})

使用import Vue from 'vue’方式打包vue组件需要安装loader；

(1)

npm i vue-loader vue-template-compiler -D

(2)配置：{test:/\.vue$/,use:'vue-loader'}
main.js里：

import Vue from 'vue'
import login from './login.vue'//引入组件
var vm = new Vue({
    el:"#app",
    data:{
        
    },
   render:function(createElements){
       return createElements(login)//通过render渲染组件
   }
})

但是以上方式会报错：

* ./node_modules/[email protected]@vue-loader/lib/index.js
You may need an additional loader to handle the result of these
loaders.

因为以上方法是vue-loader14的方式。而我下的vue-loader是15.
所以还需要配置在webpack.package.js里：
（1）
const VueLoaderPlugin = require('vue-loader/lib/plugin')
（2）：

  plugins:[
        new VueLoaderPlugin() 
    ],

vue-router: