前提

webpack当中需要配合webpack-cli使用，值得注意的是其中版本是不匹配的，如果你想要使用webpack@4来进行打包，就需要安装webpack-cli@3的脚手架来配套使用

安装webpack

安装webpack一般需要进行全局和局部的安装

npm install webpack@4 webpack-cli@3 -g //全局安装

npm install webpack@4 webpack-cli@3 -D

webpack的loader配置

因为webpack只能处理一些js和json的数据，如果想打包html或者css文件则需要使用到某些插件和依赖，并且，如果不进行基本的配置，在命令行中的指令也会变的繁琐，所以一些简单的配置是很有必要的

var path = require('path');

module.exports = {
  //打包的模式（生产模式与开发模式）
  mode: 'development',
  //入口（需要以哪个文件作为打包文件）
  entry: './foo.js',
  //出口（将打包文件打包成功后输出到哪个文件当中）
  output: {
    //给输出的文件夹命名
    path: path.resolve(__dirname, 'dist'),
    //具体打包到哪一个文件的名字
    filename: 'foo.bundle.js'
  },
  //将less文件转化成css文件
  module: {
        rules: [{
            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
            }]
        }]
    }
};

在webpack配置中loader项中的完整写法可以进行一些详细的配置，例如：可以对插件加载的顺序进行定义等等...

webpack中的插件配置

在webpack中loader只能进行一些基本的文件打包，而插件的种类繁多，有时需要使用一些插件来实现多样化的打包

webpack所用到的打包html文件使用到的插件

下载插件

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

在webpack.config.js中引入插件

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

与module配置项平级，配置plugins项

plugins: [new HtmlWebpackPlugin()]