webpack4的基础配置

全局安装

cnpm install webpack -g

初始化packet.json文件

cnpm init

项目里安装

cnpm install webpack
//cnpm install webpack-cli 最好安装

本地项目目录创建配置文件

webpack.config.js

安装 html-webpack-plugin模块和一些需要的loader

这允许你打包除 JavaScript 之外的任何静态资源.
Loaders 需要单独安装并且需要 在webpack.config.js 下的 modules 关键字下进行配置，Loaders 的配置选项包括以下几方面：
test : 一个匹配 Loaders 所处理的文件的拓展名的正则表达式（必须）
loader： loader 的名称（必须）
include/exclude: 手动添加必须处理的文件/文件夹,或屏蔽不需要处理的文件/文件夹（可选）
options：为 Loaders 提供额外的设置选项（可选）

//安装html-webpack-plugin模块
cnpm install html-webpack-plugin

//安装css-loader和style-loader
cnpm install --save-dev css-loader style-loader

//安装转换es6语法的模块
 //cnpm install --save-dev babel-core babel-loader babel-preset-es2015
//babel-preset-es2015已经被废弃，取而代之的是babel-preset-env；
cnpm install babel-loader babel-core babel-preset-env

配置服务器热响应

想不想让你的浏览器监测你修改的代码，并自动刷新修改后的结果.其实 Webpack 提供一个可选的本地开发服务器，这个本地服务器基于 node.js 构建，可以实现你想要的这些功能，不过它是一个单独的组件，在 Webpack 中进行配置之前需要单独安装它作为项目依赖.在终端中输入下面的指令安装对应组件.建议同时全局安装和安装到你的项目目录

首先全局安装

cnpm install -g webpack-dev-server

安装到你的项目目录

cnpm install --save-dev webpack-dev-server

//
devserver 作为 Webpack 配置选项中的一项，具有以下配置选项
contentBase 默认 webpack-dev-server 会为根文件夹提供本地服器，
如果想为另外一个目录下的文件提供本地服务器，
应该在这里设置其所在目录（本例设置到“public"文下）.
port 设置默认监听端口，如果省略，默认为"8080".
inline 设置为 true，当源文件改变时会自动刷新页面.
historyApiFallback 在开发单页应用时非常有用，
它依赖于 HTML5 history API，如果设置为 true，所有的跳转将指向index.html.

编辑 webpack.config.js 文件配置以上选项.
例如
 devServer: {
    contentBase: "./public",
    port: "9000",
    inline: true,
    historyApiFallback: true,
  }

添加快捷启动

编辑 package.json 文件 scripts 选项.

"scripts": {
      "start": "webpack-dev-server --hot --inline"
},

在webpack.config.js中配置相关内容

    //定义了一些文件夹的路径
    var path = require("path");//引入path模块
    var webpack = require("webpack"); //引入webpack模块
    var ROOT_PATH = path.resolve(__dirname);
    var APP_PATH = path.resolve(ROOT_PATH, 'app');
    var Pro_PATH = path.resolve(ROOT_PATH, 'project');
    //引入html模板文件
    var htmlwebpackplugin = require("html-webpack-plugin");

    module.exports={
        mode: 'production',//生产环境，会自动压缩代码  development 开发环境
    entry:app_path,        //入口文件
    output:{               //出口文件
        path:build_path,    //存放打包后文件的地方路径
        filename:"build.js"  //打包后的文件名
    },
    //热响应相关的参数
     devServer: {
                contentBase: "./public",
                port: "9000",
                inline: true,
                historyApiFallback: true,
        },
     //需要加载的一些loader,在webpack4，loaders已经改为rules
        module:{
           rules:[  //css和style的loader
           {
            test:/\.css$/,
            loaders:["style-loader","css-loader"],
              include: APP_PATH
            },
            {      //js的loader（解析es6）
            test:/\.js$/,
            loader:["babel-loader"],
              include: APP_PATH,
              query: {
                 presets: ['preset-env']
               }
             }
           ]
        },
      //配置模板文件
      plugins:[
        new htmlwebpackplugin({
            title:"首页",
            template:"./app/template.html" //模板文件的路径
        })，
        new webpack.ProvidePlugin({  //配置全局的第三方插件,如果你需要的话
              $: "jquery",
              jQuery: "jquery",
              "window.jQuery": "jquery"
           })
    ]
}

如果想配置多文件的入口

参考

var path = require('path');
var webpack = require("webpack");
var HtmlwebpackPlugin = require('html-webpack-plugin');
//定义了一些文件夹的路径
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'app');
var Pro_PATH = path.resolve(ROOT_PATH, 'project');
var COMMON = path.resolve(ROOT_PATH, 'public');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');

module.exports = {
  mode: 'production',
  //项目的文件夹 可以直接用文件夹名称 默认会找index.js 也可以确定是哪个文件名字
  entry: {
    index:APP_PATH+"/index.js",
    Pro1:Pro_PATH+"/Pro1.js",
    com:COMMON+"/common.js"
  }, 
  //输出的文件名 合并以后的js会命名为bundle.js
  output: {
    path: BUILD_PATH,
    filename: '[name].[hash].js'//添加hash值来防止js文件的缓存
  },
  //配置服务器热响应
  devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true,
    contentBase: "./app"
  },
  module: {//配置loader
    rules: [
       {
         test: /\.css$/,
         use: [ 'style-loader', 'css-loader' ]
       }，
      {
        test: /\.(png|jpg)$/,
        loader: 'url?limit=40000'
     },
     {//配置的es6转换规则 
         test: /\.js?$/,
         loader: 'babel-loader',
         include: APP_PATH,
         options: {
           presets: ['preset-env']
         }
       },
    ]
  },
  //添加我们的插件 会自动生成一个html文件
  plugins: [
    new HtmlwebpackPlugin({
    title: '首页',
    template: path.resolve(APP_PATH, 'index.html'),
    filename: 'index.html',
    //chunks这个参数告诉插件要引用entry入口里面的哪个文件
    chunks: ["index","com"],
    //要把script插入到标签里
    inject: 'body'
  }),
  new HtmlwebpackPlugin({
    title: '子页面',
    template: path.resolve(Pro_PATH, 'Pro1.html'),
    filename: 'Pro1.html',
    chunks: ["Pro1","com"],
    inject: 'body'
  }),

   //配置全局的jquery或者第三方插件库
     new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    })
  ]
};

实例（单纯压缩js）

//引入html-webpack-plugin
var htmlwebpackplugin = require("html-webpack-plugin");
var path = require("path");

module.exports = {
    entry:{
          index:__dirname+"/dist/index.js",
          information:__dirname+"/dist/infomation.js",
          detail:__dirname+"/dist/detail.js"
    },
    output:{
        path:__dirname+"/build",
        filename:"[name].js"
    },
    module:{
        loaders:[
            {
                test:/\.js$/,
                loaders:["babel-loader"],
                exclude: path.resolve(__dirname,'/app/')
            }
        ]
    }
}