webpack基础上

安装

npm init 一路回车
安装后多了一个package.json文件
//手动改一下package.json文件
增加private，表示私有项目
删除main，既然是私有就不必暴露主js文件了
修改作者

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
"scripts":{
 "dabao": "webpack"  //npm run dabao 不是npx,但这里的npm默认是先项目内
    //该文件不能有注释
},
  "private":true,   
  "author": "wyc",
  "license": "ISC",
  "devDependencies": {
    "webpack-cli": "^3.3.10"
  },
  "dependencies": {
    "webpack": "^4.41.2"
  }
}

安装webpack

由于多版本问题，不建议全局安装，而是项目安装。通过npx运行

npm install wabpack-cli --save-dev
npm install webpack --save 
npx webpack -v  //获取项目内的webpack版本号,而不是全局webpack

配置文件

不写配置文件，是默认配置，默认的配置文件名webpack.config.js。
自己写配置文件如下。新建webpack.config.js文件

const path = require('path'); //引入目录，下面使用

module.exports = {
    //mode:'production',  //无这行，打包时会有警告提示，但并无碍，production打包的代码会压缩
    mode:'development',  //打包的代码不会压缩
    entry: {
        main: './src/index.js'   //入口文件
    },
    output: {    //打包文件
        filename:'bundle.js',  //文件名称
        //path.resolve(__dirname,'dist') 返回绝对路径+'/dist'
        path:path.resolve(__dirname,'dist'),//打包后存放到的当前路径下dist文件夹下
    }
}

配置文件中已经配置了打包的js主文件，所以npx webpack即可打包，不需要npx webpack index.js了
不使用默认的配置文件名称，这么打包？npx webpack --config xxxx.js 即可

三种运行webpack的方式

webpack index.js
npx webpack index.js
npm run xxx

3种方式走的都是webpack指令，如果只安装了webpack，没有安装webpack-cli是不能执行这些指令的

Loader打包方案

webpack只能自动识别js文件打包，其他文件格式打包如jpg，pdf，css，vue等，需要安装对应的Loader插件，具体的loader对应，查看https://www.webpackjs.com/loaders/
如安装sass-loader

npm install sass-loader node-sass webpack --save-dev

//配置文件中设置jpg的打包方案，使用file-loader来打包
   module:{
      rules:[{
          test:/\.jpg$/,  //打包规则
    //use从下到上，从右到左的顺序
          use:{
              loader:'file-loader'  //打包方案
          }
      },{
            test: /\.scss$/,
            use: [
                'style-loader',
                'css-loader',
                'sass-loader'
            ]
        }]
    },

打包目录

src目录下的目录是否需要配置后才能打包？答：不配置，打包后图片存放到dist根目录，配置后存放到dist下指定目录

index.js文件中引入了imgs目录下的x.jpg，打包后在dist根目录下

import aimg from './imgs/x.jpg'

var img = new Image();
img.src = aimg;

var dom = document.getElementById('app');
dom.append(img);

配置outputPath 打包后指定所有图片统一存放到imgs目录

rules:[{
            test: /\.(jpg|png|gif)$/,  //打包规则
            use:{
                loader:'file-loader', //打包方案
                options:{
              //打包后的文件名称，不设置为自动hash名称 
                    name:'[name]_[hash].[ext]', 
                    //outputPath: 'imgs/'  //打包后存放的路径
                }
            }
        }

Plugins 插件

Plugin 可以在webpack运行到某些时刻的时候做一些事情，类似vue中的生命周期函数

自动生成html文件，并引入主JS
htmlwebpackplugin插件会在打包后，自动生成一个html文件，并把打包生成的JS自动引入到这个html文件中。
安装：npm install html-webpack-plugin -D

基础用法

var HtmlWebpackPlugin = require('html-webpack-plugin');
 module:{
        rules:[] 
},
plugins: [
  /*  new HtmlWebpackPlugin( )  //不指定模板，也会生成HTML并引入JS，但没有<div id="app"></div>   */
      new HtmlWebpackPlugin({
        template: 'src/index.html'    //按这个模板引入JS后打包
     }) 
]

clean-webpack-plugin 删除原打包目录
不删除原打包目录，继续打包会导致dist目录中存在原有文件并不需要，所以需要先删除dist目录再打包。

const CleanWebpackPlugin = require('clean-webpack-plugin');
plugins: [new CleanWebpackPlugin()] 
新版本CleanWebpackPlugin只接受一个对象作为参数，所以传个数组会报错，如果什么都不传，默认会删除outpub.path目录下的文件

devtool

devtool 此选项控制是否生成，以及如何生成 source map。
source map作用：不用source map打包后提示错误是bundle.js的错误，无法调试。用了source map能找到src目录下具体错误的位置。

source map可设置多种方式
开发模式推荐：
方式eval，是执行最快最有效的方式，但不适合复杂情况的处理。
方式为devtool:‘source-Map‘ ，适用于开发模式，能找到src目录下具体错误的行位置和列位置，dist目录中会多一些map.js
方式为devtool:‘inline-source-Map‘ ，和上个方式一样，但dist目录中不会多map.js
方式为cheap的，表示只显示具体错误的行位置，不显示列位置

生产模式推荐
生产模式不配置devtool，如果也需要提示，建议：cheap-module-source-map

devserver ，更新代码页面自动更新，无需再次打包

devserver分3部
1、npm run webpack --watch //打包并监听，检测到更新会自动打包，但需手动刷新页面
2、devserver，启动本地服务器，检测改变自动编译刷新
webpack-dev-server是一个使用了express的Http服务器，它的作用主要是为了监听资源文件的改变，该http服务器和client使用了websocket通信协议，只要资源文件发生改变，webpack-dev-server就会实时的进行编译。
3、修改webpack.config，自动打开浏览器
安装 npm install webpack-dev-server -D

//修改package.json
"scripts": {
    "bundle": "webpack",
    "watch": "webpack --watch",    //打包并监听
    "start": "webpack-dev-server",  //打包-启动web服务器。该打包不会有dist目录，而是放在内存中。
    //"server": "node server.js"  //自定义服务器，高阶用法
  },

//修改webpack.config
devServer: {
        contentBase: './dist',  
        open: true,  //自动打开浏览器
        port: 8080
},
执行npm run start  会启动本地服务器，网址http://localhost:8080

如何自定义devserver

自定义devserver 是非常复杂，非常耗费精力的，以下只是简单描述自定义方式

//express 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架
const express = require('express');  
const webpack = require('webpack');  //引入webpack
const webpackDevMiddleware = require('webpack-dev-middleware');//中间件
const config = require('./webpack.config.js'); //引用该项目配置文件
const complier = webpack(config);//webpack使用该配置文件，可随时的进行代码编译，可理解complier为编译器，编译器每执行一次就会重新打包

const app = express();  //express框架实例
app.use(webpackDevMiddleware(complier, {}));  //框架引入中间件，2个参数（编译器和对象）
//监听到端口运行app实例
app.listen(8081, () => {
    console.log('server is running');
});

更新代码后页面自动更新，但之前操作的页面内容都会不在，怎么保持原页面内容的情况下更新页面呢？
答：配置Devserver参数hot

devServer: {
        contentBase: './dist',
        open: true,
        port: 8080,
        hot: true,  //保持并刷新
        hotOnly: true   //如果不能保持并刷新，则不做任何更新
    },

Tree Shaking
Tree Shaking：没用到的代码不打包，减少打包文件大小