webpack前端模块化打包工具(webpack打包css,url,babel等,配置Vue文件依赖,搭建本地服务器和发布项目)

注：本章将配合Vue详细讲解webpack

前提条件

1.在开始之前，请确保安装了 Node.js 和npm的最新版本。使用旧版本，你可能遇到各种问题，因为它们可能缺少 webpack 功能以及/或者缺少相关 package 包。
在 cmd 中node -v,npm -v可查看对应的版本和安装情况。
2.这里会用到ES6的模块化，如果你了解可以直接开始，不了解请看关于ES6模块化的文章。
(作者会更新ES6模块化)

webpack是什么

webpack可以理解成打包工具。
webpack更强调的是模块化。而文件合并，预处理等功能，是它附带的功能。如果项目使用了模块化管理，而且互相依赖非常强，我们就可以使用更强大的webpack。

grunt/gulp更强调的是前端流程的自动化，模块化不是它的核心如果你的工程模块依赖非常简单，甚至没有用模块化的概念，只需要简单的进行合并，压缩，就使用grunt/gulp。

安装webpack

// 安装webpack
npm install webpack@3.6.0 -g

// 查看版本：
webpack -veison

// 清除node缓存：
npm cache clean -f

// 卸载全局：
npm uninstall webpack -g

安装完成后就可以使用 webpack 将你的代码打包。
打包代码：
webpack ./src/main.js ./dist/bundle.js
webpack：参数1 参数2
参数1是你的入口文件(主文件)
参数2是打包后的文件目录

打包后在目录下 dist/bundle.js 就会产生一个bundle.js的文件，这个文件就是打包后的文件。

配置webpack.config.js：

首先创建你的项目文件夹 XXX。
在项目下创建 webpack.config.js 并配置好以下内容：

const path = require('path');  //在node (全局) 中寻找 path 包

module.exports = {
    entry: './src/main.js',  //入口文件
    output: {    //出口文件
        path: path.resolve(__dirname, 'dist'),   //出口文件路径
        filename: 'bundle.js'   //出口文件名字
    },
}

webpack.config.js 是这个项目的配置文件，所有配置以后都写在这里面。

npm init 自动创建package.json

在项目终端目录下 npm init：会帮助你安装一个package.json的文件，如下：

npm init

{
  "name": "meetwebpack",    //项目名字
  "version": "1.0.0",       //版本
  "description": "",        //描述
  "main": "index.js",       //入口路径
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "hollow",       //作者
  "license": "ISC"          //许可证
}

然后再 npm install 安装依赖。
之后就可以直接用 webpack 打包项目，不在使用麻烦的写 webpack ./src/main.js ./dist/bundle.js 打包了。

npm run build

作用：把 webpack 映射到 npm run build 上，用 npm run build 进行打包在 package.json 文件中的 "scripts" 中添加 "build": "webpack"。如下：

{
  "name": "meetwebpack",
  "version": "1.0.0", 
  "description": "",
  "main": "index.js", 
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack", //这里是新添加的
  },
  "author": "hollow",
  "license": "ISC"
}

npm run XXX 就是在 scripts 中找 XXX 然后执行后面的语句，例如 npm run build,就是执行了 webpack。

npm install webpack@3.6.0 --save-dev

局部安装 webpack ：因为考虑到有些 clone 的项目和自己全局安装的 webpack 版本不一样从而导致打包失败，所以每个项目都需要安装局部 webpack

注：在使用局部打包的时候一定要用 npm run build 进行打包，因为npm run build 才会在本地 node_modules/bin 路径中找命令进行打包，如果没有找到，才会去全局的环境变量中寻找。

配置webpack css

1.在项目下安装 css 依赖：

npm install --save-dev css-loader

2.修改 webpack.config.js rulse 文件,对 css 依赖进行配置。

module.exports = {
  module: {
    rules: [
      // css 文件打包配置
      {
        test: /\.css$/,
        // css-loader 解析 CSS 文件后，使用 import 加载，并且返回 CSS 代码
        // style-loader 将模块的导出作为样式添加到 DOM 中
        // 使用多个loader时，是从右向左，所以stype-loader在css-loader前面
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
}

3.安装 style 依赖(安装这个依赖才能真正的将样式添加到 DOM 上)：

npm install --save-dev style-loader

4.在 main.js 中引用 css 文件：

require('./css/normall.css');

5.这时候才能真正的看到样式被添加到了 DOM 上。

配置webpack less

1.安装 less 依赖：

npm install --save-dev less-loader less

2.在 webpack.config.js rules 中进行 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
  }]
}

这时打包后的代码就能识别 less 文件了。

配置webpack 图片(url)：

1.在项目下安装图片 (url) 依赖：

npm install url-loader --save-dev

2.在 webpack.config.js rules 中进行配置：

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

这时安装配置 url 已经完成了，可以在 html 中添加一个 img 标签测试

3.对于太大的图片，我们建议安装 file-loader

npm install file-loader --save-dev

4.如果打包出来的图片没有显示并且网页上的链接显示 background: url([object Object]) 这是因为 file-loader 版本问题，所以对版本进行降级，替换的版本：

npm install file-loader@3.0.1 --save-dev -s

webpack ES6转ES5的babel

1.在项目下安装 ES6 语法处理的依赖：

npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

2.在 webpack.config.js rules 中进行配置：

// webpack ES6转ES5的配置
{
  test: /\.js$/,
  exclude: /(node_modules|bower_components)/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['es2015']
    }
  }
}

3.这个时候在打包就会自动把 ES6 语法转成 ES5 语法

配置 webpack Vue.js

1.在项目下的安装Vue.js：

npm install vue --save

2.在 js 文件中导入 Vue ：在导入中会自动去 node_modules 中去找 Vue 包，导入之后就能使用 Vue了

import Vue from 'vue';

3.在 webpack.config.js 中配置 vue.js 的引用：

// 配置 Vue.js 的引用
resolve: {
  // alias:别名
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
    }
}

注：resolve、module、output、entry 是同一级别

webpack 配置 .vue 文件依赖

1.在项目下安装 .vue 文件依赖：

npm install --save-dev vue-loader vue-template-compiler

2.在 webpack.config.js 中配置 .vue :

// .vue 文件的配置
{
  test:/\.vue$/,
  use:['vue-loader']
}

3.引用 .vue 文件：

import App from './vue/App.vue

webpack 配置 plugin(横幅)

1.在 webpack.config.js 中配置 plugins ：
先引用 webpack

const webpack = require('webpack');  //在 node(全局) 中寻找 webpack 包——用来配置横幅的(版权)

然后在 webpack.config.js 中添加 plugins

// 横幅的配置(版权)
plugins:[
  new webpack.BannerPlugin('最终版权归hollow所有'),
]

注：plugins、resolve、module、output、entry 是同一级别的

webpack 配置 HtmlWebpackPlugin

1.在项目下安装 HtmlWebpackPlugin 依赖：

npm install html-webpack-plugin --save-dev

2.在 webpack.config.is 中配置 plugins
先引用 plugins：

const HtmlWebpackPlugin = require('html-webpack-plugin'); //在 node(全局) 中寻找 

然后在 plugins 中添加 new HtmlWebpackPlugin()

plugins:[
  new webpack.BannerPlugin('最终版权归hollow所有'),
  new HtmlWebpackPlugin(),
]

3.让 HtmlWebpackPlugin 根据模板来生成新的 html 文件：
因为新生成的文件没有包含 <div id='app'></div>
所以我们要修改 webpack.config.js 中的 plugins 里的 new HtmlWebpackPlugin 来进行模板配置：

// 横幅的配置(版权)
plugins:[
  new webpack.BannerPlugin('最终版权归hollow所有'),
  new HtmlWebpackPlugin({
    template: 'index.html',
  }),
]

webpack 中配置 uglifyjsWebpackPlugin

1.在项目下安装依赖：

npm install uglifyjs-webpack-plugin --save-dev

2.在 webpack.config.js 中配置 UglifyjsWebpackPlugin
先引用 UglifyjsWebpackPlugin

// 在mode(全局) 中寻找uglifyjs-webpack-plugin(用来压缩js代码的)
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin'); 

然后在 plugins 中添加 new UglifyjsWebpackPlugin()

plugins:[
  new webpack.BannerPlugin('最终版权归hollow所有'),
  new HtmlWebpackPlugin({
    template: 'index.html',
  }),
  new UglifyjsWebpackPlugin(),
]

webpack-dev-server搭建本地服务器

1.在项目下安装依赖：

npm install webpack-dev-server --save-dev 

2.在 webpack.config.js 中配置 devServer :

// 本地服务的配置
devServer: {
  contentBase:'./dist',
  inline:true,
}

注：devServer、plugins、resolve、module、output、entry是同一级别

3.在 package.json 中的 scripts 进行配置：

"dev":"webpack-dev-server --open"

加入这行代码表示，以后只需要 npm run dev 就能进行测试我们修改过的代码。如果没有问题再 nmp run build 进行打包

注：--open 表示在 npm run dev 之后，会自动帮我们打开浏览器

webpack-配置文件的分离

1.在项目下建一个 build 的文件夹，并且在 build 文件夹中创建 base.config.js、dev.config.js、prod.config.js 文件

base.config.js

公共的东西放在这里面

// 公共的
const path = require('path');  //在node (全局) 中寻找 path 包——用来配置出口文件路径的
const webpack = require('webpack');  //在 node(全局) 中寻找 webpack 包——用来配置横幅的(版权)
const HtmlWebpackPlugin = require('html-webpack-plugin'); //在 node(全局) 中寻找 html-webpack-plugin 包(用来webpack自动帮我们生成一个最终html文件)

module.exports = {
    entry: './src/main.js',     //入口文件
    output: {      //出口文件
        path: path.resolve(__dirname, 'dist'),  //出口文件路径
        filename: 'bundle.js',   //出口文件名字
        // publicPath: 'dist/'
      },
    module: {
        rules: [
            // css 文件打包配置
            {
              test: /\.css$/, 
            // css-loader 解析 CSS 文件后，使用 import 加载，并且返回 CSS 代码
            // style-loader 将模块的导出作为样式添加到 DOM 中
            // 使用多个loader时，是从右向左，所以stype-loader在css-loader前面
              use: [ 'style-loader', 'css-loader' ]   
            },
            // 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
              }]
            },
            // 图片打包配置
            {
              test: /\.(png|jpg|gif)$/,
              use: [
                {
                  loader: 'url-loader',
                  options: {
                    // 当加载图片小于limit时，会将图片编译成base64字符串形式
                    // 当加载的图片大于limit时，需要使用 file-loader 模块进行加载
                    limit: 8192,
                    name:'img/[name].[hash:8].[ext]'
                  },
                }
              ]
            },
            // webpack ES6转ES5的配置
            {
              test: /\.js$/,
              exclude: /(node_modules|bower_components)/,
              use: {
                loader: 'babel-loader',
                options: {
                  presets: ['es2015']
                }
              }
            },
            // .vue 文件的配置
            {
              test:/\.vue$/,
              use:['vue-loader']
            }
            
        ]
    },
    // 配置 Vue.js 的引用
    resolve: {
      // alias:别名
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
      }
    },
    // 横幅的配置(版权)
    plugins:[
      new webpack.BannerPlugin('最终版权归hollow所有'),
      new HtmlWebpackPlugin({
        template: 'index.html',
      }),
    ],
}

dev.config.js

开发时依赖的东西放在这里面

// 开发时依赖的
module.exports = {
  devServer: {
    contentBase:'./dist',
    inline:true,
  }
}

prod.config.js

编译时依赖的东西放在这里面

// 编译时依赖的
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin'); // 在mode(全局) 中寻找uglifyjs-webpack-plugin(用来压缩js代码的)
module.exports = {
  plugins:[
    new UglifyjsWebpackPlugin(),
  ],
}

2.在项目文件下安装 webpack-merge 依赖：

npm install webpack-merge@4.1.5 --save-dev

3.在 prod.comfig.js 中配置 webpackMerge 和 baseConfig
先导入依赖：

const webpackMerge = require('webpack-merge');
const baseConfig = require('./base.config');

然后再配置依赖：

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

4.在 dev.config.js 中配置 webpackMerge 和 baseConfig
先导入依赖：

const webpackMerge = require('webpack-merge');
const baseConfig = require('./base.config');

然后再配置依赖:

module.exports = webpackMerge(baseConfig, {
  devServer: {
    contentBase:'./dist',
    inline:true,
  }
})

5.修改 package.json 中 scripts 的配置：

"build": "webpack --config ./build/prod.config.js",
"dev": "webpack-dev-server --open --config ./build/dev.config.js"

6.修改 base.config.js 中 output 中 path 的路径：

output: {      //出口文件
  path: path.resolve(__dirname, '../dist'),  //出口文件路径
  filename: 'bundle.js',   //出口文件名字
  // publicPath: 'dist/'
},

下一篇 Vue-cli

Vue-cli会自动帮我们生成上面所有的代码，不用我们一个个去单独配置