VUE05--{webpack}

1. 定义

javaScript应用程序的模块打包器，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
(1) 转换 -- 浏览器不能识别的代码
(2) 打包 -- 多个文件打包成入口文件

2.使用

2.1 先安装node环境

npm install webpack@3.11.0 -g

安装node环境

2.2 webpack-cli

（1）准备文件如下

（2）终端输入webpack ./app.js ./index.js
文件夹中生成index.js文件

（3）将index.html中引用文件改为index.js即可

（4）打印结果如下

2.3 webpack-config

目标：配置webpack.config.js文件，简化终端的输入操作，输入webpack即可

（1）准备文件如下

（2）webpack.config.js具体配置如下

var path = require('path');

module.exports = {
    // 配置入口文件
    entry: './src/app.js',
    // 配置输出文件
    output: {
        // 输出路径
        path: path.join(__dirname, 'dist'),
        // 输出文件名
        filename: 'bundle.js',
    }
}

（3）终端输入webpack
会根据配置生成dist文件夹，bundle.js文件

（4）将index.html中引用文件改为dist/bundle.js即可

（5）打印结果如下

2.3 webpack-dev-server

目标：搭建webpack的服务器

步骤：
（1）准备文件

（2）终端输入npm init -y 生成 package.json 文件

终端输入npm i webpack-dev-server@2.9.7 webpack@3.11.0 -D

（3）配置webpack.config.js，设置静态资源在服务器上运行时的访问路径

var path = require('path')

  module.exports = {
    // 入口文件配置
    entry: "./src/app.js",

    // 输出配置
    output: {
      // 输出的路径
      path: path.join(__dirname, 'dist'),
      // 静态资源在服务器上运行时的访问路径
      publicPath: '/dist',
      // 输出文件名字
      filename: "bundle.js"
    }
  }

index.html中修改为 <script src="/dist/bundle.js"></script>
（4）终端输入webpack-dev-server
如果报错，就在package.json中写dev，然后终端输入 npm run dev

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },

（5）修改package.json中配置，然后终端输入 npm run dev

"dev": "webpack-dev-server --inline --hot --open --port 8090"

--inline 热加载
--hot 热替换
当资源改变时，webpack-dev-server将会先尝试热替换(HRM)，如果失败则重新加载整个入口页面。

2.4 webpack-css

目标：解决在.js文件中，用require方法引入css样式时，样式不能成功使用的问题

（1）终端输入 npm install css-loader style-loader -D安装包
（2）将webpack.config.js文件，module/rules中设置为

module: {
    rules: [
      // 配置的是用来解析.css文件的loader(style-loader和css-loader)
      {
        // 1.0 用正则匹配当前访问的文件的后缀名是  .css
        test: /\.css$/,
        use: ['style-loader', 'css-loader'] //webpack底层调用这些包的顺序是从右到左
      }
    ]
  }

css-loader -- 处理css文件 | style-loader -- 在index.html中创建style标签
（3）终端输入npm run dev

2.5 webpack-less & sass

目标：解决在.js文件中，用require方法引入.less和.sass文件，样式不能成功使用的问题

（1）终端输入 npm i less less-loader sass-loader node-sass -D安装包
（2）将webpack.config.js文件，module/rules中设置为

{
    test: /\.less$/,
    use: [{
        loader: 'style-loader'
    }, {
        loader: 'css-loader'
    }, {
        loader: 'less-loader'
    }]
},

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

（3）终端输入npm run dev

2.6 webpack-image & fonts

目标：解决使用webpack打包时，字体图标和图片不能正常解析的问题

（1）终端输入 npm i file-loader url-loader -D安装包（url-loader封装了file-loader）
（2）将webpack.config.js文件，module/rules中设置为

{
    test: /\.(png|jpg|gif|eot|svg|ttf|woff)/,
    use: [{
        loader: 'url-loader',
        options: {
          // limit表示如果图片大于50000byte，就以路径形式展示，小于的话就用base64格式展示
            limit: 50000
        }
    }]
}

limit表示如果图片大于50000byte，就以路径形式展示，小于的话就用base64格式展示
（3）终端输入npm run dev

2.7 webpack-html

目标：根据设置的模板，在每次运行后生成对应的模板文件，同时所依赖的CSS/JS也都会被引入。

（1）终端输入 npm i html-webpack-plugin -D安装包
（2）将webpack.config.js文件，module中设置为

// 注意需要注释掉publicPath，不然会冲突

var HtmlWebpackPlugin = require('html-webpack-plugin')

plugins: [
    new HtmlWebpackPlugin({
        filename: 'index.html',
        template: 'template.html',
        title: '首页'
    })
]

title -- 需要在模板'template.html'中添加<%= htmlWebpackPlugin.options.title %>
需要注释掉publicPath，不然会冲突

title
生成html文件的标题
filename
就是html文件的文件名，默认是index.html
template
指定你生成的文件所依赖哪一个html文件模板，模板类型可以是html、jade、ejs等。但是要注意的是，如果想使用自定义的模板文件的时候，你需要安装对应的loader哦。

（3）终端输入npm run dev

2.8 webpack-babel

作用：兼容处理ES6语法

（1）终端输入 npm install babel-core babel-loader babel-preset-env -D安装包
（2）将webpack.config.js文件，module/rules中设置为

            {
                test: /\.js$/,
                // Webpack2建议尽量避免exclude，更倾向于使用include
                // exclude: /(node_modules)/, // node_modules下面的.js文件会被排除
                include: [path.resolve(__dirname, 'src')],
                use: {
                    loader: 'babel-loader',
                    // options里面的东西可以放到.babelrc文件中去
                    options: {
                        presets: ['env']
                    }
                }
            }

（3）如果options中内容太多，可以新建.babelrc文件，将内容转入其中

{
  "presets":["env"]
}

（4）终端输入 npm run dev