Webpack——使用（一）

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第17天，点击查看活动详情。

简介

webpakc的定位实际上是打包器.而不是任务执行器.

当然也可以配合grunt进行使用.

webpack也提供了便捷的打包流程,项目构建,插件管理等等.

为了更好的构建项目从开发到生产都一一提供了解决方案.

Vue官方也推荐使用的vue-loader也是基于webpack的. 因此这里简单介绍一下webpack的使用一些总结.更详细细致的内容可以到官网进行拓展.

安装

局部安装

使用命令行的安装方式 :

npm install --save-dev webpack

我们可以写到配置文件当中package.json,对应的目录中然后再执行npm install

{
  "name": "XXXX",
  "version": "1.0.0",
  "description": "XXX",
  "author": "XXX",
  "private": true,
  "scripts": {//指定执行命令
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "watch":"webpack --watch",
    "build": "webpack --config webpack.prod.js",//也可以进行自定义
    "debug": "nodemon build/build.js"
  },
  "dependencies": {
    "swiper": "^4.0.7",
    "vue": "^2.5.2",
    "vue-router": "^2.8.1",
    "element-ui": "2.2.1"
  },
  "devDependencies": {
  }
}

全局安装

npm install --global webpack

工程结构

我们可以根据项目的实际的情况设置目录.
一般情况下可以设置为源码目录,生产目录.

我们可以将webpack配置文件与package.json放入到项目的根目录.

webpack配置文件

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};  

目录结构如下:

webpack-demo
|- package.json
|- webpack.config.js
|- /dist
  |- bundle.js
  |- index.html
|- /src
  |- index.js
|- /node_modules

资源管理

这里先简单介绍下CSS资源的管理配置.

安装loader,loader的作用就是将文件进行处理(编译,压缩).

npm install --save-dev style-loader css-loader

module.exports =     
{
    module: {
      rules: [
        {
          test: /\.css$/, //指定匹配文件,使用style-loader,css-loader
          use: [
            'style-loader',
            'css-loader'
          ]
      }]
     }
}

输出管理

输出管理的目的是为了更好的简化工作.
我们可以使用插件,输出js名字更替等

webpack当中有许多的插件我么可以将其进行更替.

这边先简单介绍两个插件 生成html的插件,清除目录的插件.

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

整个配置文件,注意插件的配置顺序.

  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const CleanWebpackPlugin = require('clean-webpack-plugin');

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
    plugins: [
      new CleanWebpackPlugin(['dist']),//清除dist目录
      new HtmlWebpackPlugin({ //生成一个html页面指定其title,然后会自动将js文件生成引入js代码
        title: 'Output Management'
      })
    ],
    output: {
      //publicPath:XXX 可以资金定义路径,build后输出的内容将会放入到这个路径当中
      filename: '[name].bundle.js', //注意name用方括号括起来,name的值对应的为entry的key值,这样为了区分多个文件 
      path: path.resolve(__dirname, 'dist')
    }
  };