webpack打包配置

1、打包js文件

1、找到当前文件夹：
cd pink教学案例
cd vue
cd 资料
cd “Day 04”
cd 课堂代码4
cd LearnVuejs04-v2
cd 01-webpack的使用

cd … （上一个文件夹）

2、初始化：
在终端输入：npm init 就会生成package.json
在终端输入：npm install 生成 package-lock.json

3、建 webpack.config.js

const path = require('path'); // 依赖node动态获取路径

module.exports = {
  entry: './src/main.js',    // 入口，也就是要打包的js
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'    // 出口，打包生成的js
  },
}

4、在package.json文件里的test下加上一句 “bulid”:“webpack”
5、本地安装webpack 在终端输入 npm install webpack@3.6.0 --save-dev
6、打包：在终端输入 npm run build （优先执行本地的webpack，找不到则使用全局webpack）

2、打包css文件

在打包js文件的基础上：
1、在入口js（main.js）添加：require(’./css/normal.css’) 要添加的css文件
2、安装css-loader：在终断输入 npm install --save-dev css-loader
3、安装style-loader：在终端输入 npm install --save-dev style-loader
4、配置：在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$/,
        // css-loader只负责将css文件进行加载
        // style-loader负责将样式添加到DOM中
        // 使用多个loader时, 是从右向左
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
}

5、打包 npm run build

3、打包less文件

在打包css文件的基础上：
1、在入口js（main.js）引入less文件，添加：require(’./css/special.less’) 要添加的less文件
2、安装对应的less-loader 在终端输入 npm install --save-dev less-loader less
3、配置：在webpack.config.js中配置
添加一个rules选项，用于处理less文件

	  {
        test: /\.less$/,
        // 使用多个loader时, 是从右向左
        use: [{
          loader: "style-loader", // creates style nodes from JS strings
        }, {
          loader: "css-loader" // translates CSS into CommonJS
        }, {
          loader: "less-loader", // compiles Less to CSS
        }]
      }

4、打包 npm run build

4、打包图片

在css样式中导入图片 url()
图片分两种：小于8kb，大于8kb

小于8kb

1、安装url-loader 输入：npm install --save-dev url-loader
2、配置：在webpack.config.js中配置
添加一个rules选项，用于处理图片

	{
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 当加载的图片, 小于limit时, 会将图片编译成base64字符串形式.
              // 当加载的图片, 大于limit时, 需要使用file-loader模块进行加载.
              // 图片大小 * 1024 比较 limit
              limit: 8192,
              name: 'img/[name].[hash:8].[ext]'
            },
          }
        ]
      }

3、打包 npm run build

大于8kb

只需在以上基础上安装 file-loader
1、安装 npm install file-loader --save-dev
2、配置
webpack会将大于8kb的图片当做一个文件，就把该图片一起打包到dist文件夹中
所以应该在webpack.config.js中再次配置，在 output 中添加 publicPath: ‘dist/’
3、打包 npm run build

注意： 配置图片规则时，有 name: ‘img/[name].[hash:8].[ext]’，这是为了对打包的图片名字有一定的要求，比如：将所有的图片放在一个文件夹中，跟上图片原来的名称，同时也要防止重复。（因为打包大图片时，会给图片起一个名字防止重复，但是这个名字是一个32位hash值）

在options中添加上如下选项：
img：文件要打包到的文件夹
name：获取图片原来的名字，放在该位置
hash:8：为了防止图片名称冲突，依然使用hash，但是我们只保留8位
ext：使用图片原来的扩展名

5、ES6 转 ES5

为了兼容性

1、安装
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
2、配置webpack.config.js文件

	  {
        test: /\.js$/,
        // exclude: 排除
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      }

6、配置vue

安装vue有三种方式：①直接安装引用②CDN引入③npm安装

1、在index.html 写入实例

<div id="app">
</div>

2、安装vue
npm install vue --save
npm install vue-loader vue-template-compiler --save-dev

3、在main.js 引入vue （依赖）

import Vue from 'vue'
import App from './vue/App'  //引入App.vue

引用实例：

new Vue({
  el: '#app',
  template: '<App/>',
  components: {
    App
  }
})

4、建立要引入的App.vue（模板）
App.vue

<template>
  <div>
    <h2 class="title">{{message}}</h2>
    <button @click="btnClick">按钮</button>
    <h2>{{name}}</h2>
    <Cpn/>
  </div>
</template>

<script>
  import Cpn from './Cpn'  // 引入Cpn组件 Cpn.vue

  export default {
    name: "App",
    components: {
      Cpn  // 可以引入新的组件
    },
    data() {
      return {
        message: 'Hello Webpack',
        name: 'coderwhy'
      }
    },
    methods: {
      btnClick() {
      }
    }
  }
</script>

<style scoped>
  .title {
    color: green;
  }
</style>

5、配置webpack.config.js
resolve是与module并列的。

  resolve: {
    // alias: 别名
    extensions: ['.js', '.css', '.vue'],  // 省略后缀名
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }

6、配置package.json
将vue-loader版本修改为 13.0.0

    "vue-loader": "^13.0.0",  // 安装的是13.0.0 到 14.0.0

7、打包 npm run build

7、plugin

plugin的使用过程：
步骤一：通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装)
步骤二：在webpack.config.js中的plugins中配置插件。

添加版权

插件BannerPlugin，属于webpack自带的插件。

1、配置webpack.config.js

const webpack = require('webpack')

module.exports = {
  module：{},
  plugins: [
      new webpack.BannerPlugin('最终版权归GoodLuck_wu5所有')
  ],
}

2、打包 npm run build

打包html

HtmlWebpackPlugin插件可以为我们做这些事情：
①自动生成一个index.html文件(可以指定模板来生成)
②将打包的js文件，自动通过script标签插入到body中

1、安装插件 npm install html-webpack-plugin --save-dev
2、配置webpack.config.js

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

module.exports = {
  module：{},
  plugins: [
    new HtmlWebpackPlugin({
      template: 'index.html'
    }),
  ],
}

3、打包 npm run build

压缩js

1、安装插件 npm install uglifyjs-webpack-plugin@1.1.1 --save-dev （版本号指定1.1.1，和CLI2保持一致）
2、配置webpack.config.js文件

const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  module：{},
  plugins: [
    new UglifyjsWebpackPlugin()
  ],
}

3、打包
4、在开发阶段不要使用，等发布打包时再使用。

8、搭建本地服务器

1、安装插件 npm install --save-dev webpack-dev-server@2.9.1
2、配置webpack.config.js文件

module.exports = {
  module：{},
  devServer: {
    contentBase: './dist',  //为哪一个文件夹提供本地服务，默认是根文件夹
    inline: true  // 页面实时刷新
  }
}

属性：
① contentBase：为哪一个文件夹提供本地服务，默认是根文件夹，我们这里要填写./dist
② port：端口号
③ inline：页面实时刷新
④ historyApiFallback：在SPA页面中，依赖HTML5的history模式
3、配置package.json
在build 下添加

"dev": "webpack-dev-server --open" // --open打开浏览器

4、npm run dev
之后修改代码就不再用打包了，等想要发布时再执行 npm run build
5、在打包发布时，就不再需要本地服务器了。