webpack使用详解

官网

　　官网：https://webpack.js.org

　　中文网：https://www.webpackjs.com

一、介绍

　　从webpack4.+进行介绍，会对Webpack常用配置一一讲解，各个功能点都有对应的详细例子，你如果能动手跟着本文中的例子完整写一次，你会觉得Webpack也不过如此。

1.1、webpack是什么

　　webpack是一种前端资源构建工具(模块打包器)，一个静态模块打包器.在webpack看来，前端的所有资源文件(js/json/css/image/less/sass...)都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源。

 从 v4.0.0 开始，webpack 可以不用再引入一个配置文件来打包项目，然而，它仍然有着高度可配置性，可以很好满足你的需求。
配置文件: webpack.config.js

1.2、webpack都能干些什么

 1.3、webpack五个核心概念

  • mode                     模式　　  development / production ，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化
  • entry                     入口         本项目应该使用哪个模块，来作为构建其内部依赖图的开始（指定打包入口文件）
  • output                  输出          在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist
  • loader                   loader      让webpack能够去处理那些非js文件(webpack自身只理解js)
  • plugins                 插件　　  则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

二、简单案例

2.1、准备工作

1、首先：webpack是运行在node环境中的，Node >= 8.10 和 npm >= 5.6（node环境链接：https://nodejs.org/en/     直接下载电脑对应的版本即可。）

　　1、接下来新建项目文件夹这里我起名为：webpack_project

　　2、打开终端切换到项目文件夹下

　　3、执行命令初始化项目生成package.json：　  npm init -y

　　4、执行命令下载webpack与webpack-cli依赖： npm i -D webpack webpack-cli

　npm init -y
　npm i -D webpack webpack-cli

　　

      

　　tips:

　　　　install　　　 可简写为　　i,

　　　　--global　　　可简写为　　-g,

　　　　--save-dev　　可简写为　　-D

　　　　--save　　　　可简写为　　-S

2、检查是否安装成功

　　这里注意一下版本 有些版本会遇到一些坑 ， 若运行不起来，可以复制我这个版本放到对应的位置上， 然后npm i初始化一下

3、使用npx来完成本项目中的命令执行

npm webpack --version

4、在package.json文件中配置webpack运行脚本命令

执行命令 npm run build

2.2、新建

webpack_project 中创建src，dist文件夹，接下来再创建三个文件:

index.html 　　--放在dist文件夹中；
hello.js 　　  --放在src文件夹中；
index.js　　   --放在src文件夹中；

我们在index.html中写下html代码，它的作用是为了引入我们打包后的js文件：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Webpack Projecttitle>
head>
<body>
    <div id='root'>div>
    <script src="bundle.js">script>   
body>
html>
我们在hello.js中导出一个模块：

// hello.js
module.exports = function() {
    let hello = document.createElement('div');
    hello.innerHTML = "Long time no see!";
    return hello;
  };


然后在index.js中引入这个模块（hello.js）:
//index.js 
const hello = require('./hello.js');
document.querySelector("#root").appendChild(hello());

2.3 通过配置文件来使用webpack

 在当前项目的根目录下新建一个配置文件webpack.config.js，我们写下如下简单配置代码，目前只涉及入口配置（相当于我们的index.js，从它开始打包）和出口配置（相当于我们打包生成的bundle.js）。

// webpack.config.js
module.exports = {
　　　mode:'development',               
    entry: __dirname + "/src/index.js", 　　// 入口文件
    output: {
        path: __dirname + "/dist", 　　　　//打包后的文件存放的地方
        filename: "bundle.js" 　　　　　　//打包后输出文件的文件名
    }
}
//注：__dirname是node.js中的一个全局变量，它指向当前执行脚本所在的目录，即C:\Users\sjt\DeskTop\webpack-project（这是我当前的目录）

但平时我们看到的脚手架配置也比较喜欢采用node.js的path模块来处理绝对路径，所以我们也可以采用如下的写法，和上述的效果是一样的：

// webpack.config.js
const path = require('path');
module.exports = {
　　 mode:'development',　　　　　　　　　　　　　　　　//开发环境
    entry: path.join(__dirname, "/src/index.js"), // 入口文件
    output: {
        path: path.join( __dirname, "/dist"), 　　//打包后的文件存放的地方
        filename: "bundle.js" 　　　　　　　　　　  //打包后输出文件的文件名
    }
}
//注：path.join的功能是拼接路径片段。

扩展：这里再讲一下    filename 扩展写法

output: {   //项目出口
        path: path.resolve('dist'),  // 打包生成路径  绝对路径
        /* 
            打包名称
                filename:'js/[name]-[hash:8].js'
                [name]文件名称变量 默认main
                [hash]生成不重复字符串 :8 一般最少六位
         */
        filename: 'bundle-[hash:8].js'
    },

2.4 开始进行webpack打包

在终端中使用命令进行打包：

npm run build   ---这里前提是我们在 2.1第四步中package.json配置了"build":"server"
　　　　　　　　　　注意：package.sjon 文件内不能用注释，不能单引号

上述就相当于把src文件夹下的index.js文件打包到dist文件下的bundle.js，这时就生成了bundle.js供index.html文件引用

　运行结果：

三、基本开发环境配置

为了让我们的项目看起来更像真正的公司项目，这里我们要配置生产和开发环境两个版本，方便在以后的项目开发中针对不同的环境进行打包。

3.1、配置基本开发环境

　　1、在项目根目录中创建一个config目录，专门用于存放webpack的相关配置文件

　　　　dev：生产环境

　　　　prod：开发环境

　　　　这里由于配置文件修改 　　enrty入口与 　　path输出位置　　也要做相应调整　　 

              

　　2、在package.json文件中的scripts自定义命令中修改webpack打包命令

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

             

　　3、运行成功：

            

3.2、html-webpack-plugin插件

首先根目录下面创建一个public目录，并在此目录中创建一个index.html文件，使用 html-webpack-plugin插件，可以将此文件用于项目web入口文件模块。

1、设计与回顾

　　为了把上面的内容更好地吸收，我们重新撸一下思路。

　　第一步：创建项目  webpackProject

　　第二步：生成package.json　　

　　　　　　打开终端切换到 webpackProject工程下（win+r 输入cmd可以快速打开终端）

　　　　　　执行命令:　　npm init -y

　　第三步：下载webpack相关依赖　　

　　　　　　执行命令：npm i -D webpack webpack-cli

　　　　　　版本参考："webpack": "^4.44.2", "webpack-cli": "^3.3.12"

　　第四步：新建子文件

　          　

　　第五步：webpack.config.dev.js内书写打包内容（这里稍稍有些区别）

const path = require('path');
module.exports = {
    mode: 'development',　　　　　　　　　　　　　　　　//开发环境
    entry: "./src/index.js", // 入口文件
    output: {
        path: path.resolve('dist'), 　　//打包后的文件存放的地方
        filename: "[name]-[hash:8].js" 　　　　　　　　　　  //打包后输出文件的文件名
    }
}

！！从现在开始是新的内容　　

　　第六步：安装html-webpack-plugin　　( 版本："html-webpack-plugin": "^4.4.1",)

　　　　　　执行命令：npm i -D html-webpack-plugin  

　　第七步：webpack.config.dev.js中配置　　html-webpack-plugin

// 1、HWP引入
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path');
module.exports = {
    mode: 'development',　　　　　　　　　　　　　　　　//开发环境
    entry: "./src/index.js", // 入口文件
    output: {
        path: path.resolve('dist'), 　　//打包后的文件存放的地方
        filename: "[name]-[hash:8].js" 　　　　　　　　　　  //打包后输出文件的文件名
    },
    // 2、HWP使用
    plugins:[
        new HtmlWebpackPlugin({
            title:'welcome Webpack',
            template:path.resolve(__dirname,'../public/index.html')
        })
    ]
}
//注：path.join的功能是拼接路径片段。
/* 
    path.resolve(__dirname,'../public/index.html')
    相当于
        cd config
        cd ..
        cd public
        cd index.html
*/

# 模板中使用定义的title  index.html

<%= htmlWebpackPlugin.options.title %>

四、构建本地服务器

 现在我们是通过打开本地文件来查看页面的，看起来总感觉比较low，看别人用vue，react框架时都是运行在本地服务器上的，那我们能不能也那样呢？那必须的！

4.1 webpack-dev-server配置本地服务器

　　1、安装相关依赖　　npm i -D webpack-dev-server

　　　　配置参数说明：

　　　　contentBase:'文件位置'　　　　打包服务器所在位置  有变化从新reload　

  　　　  watchContentBase: true, 　　   忽略文件，一版git忽略相关文件         　　watchOptions: {ignored: /node_modules/}, 　　　　port:'8080'　　　　　　　　　　端口号，不写默认8080 　　　　host:'localhost'　　　　　　　　域名 　　　　open：true　　　　　　　　　  自动打开浏览器　  　　　   clientLogLevel: 'none', 　　　　不显示启动日志         　   quiet: true,            　　　　　　显示基本信息，其余不展示         　   overlay: false,         　　　　     错误不全屏显示　  　　　　inline: true,               　　　　  文件修改后实时刷新             　historyApiFallback: true,   　　不跳转                 compress: true,             　　　 gzip压缩 　　 2、配置webpack.config.dev.js 
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path');
module.exports = {
    mode: 'development',　　　　　　　　　　　　　　　　//开发环境
    entry: "./src/index.js", // 入口文件
    output: {
        path: path.resolve('dist'), 　　//打包后的文件存放的地方
        filename: "[name]-[hash:8].js" 　　　　　　　　　　  //打包后输出文件的文件名
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'welcom to Webpack',
            template: path.resolve(__dirname, '../public/index.html'),
        })
    ],
　　//1、webpack-dev-server相关配置
    devServer: {
        contentBase:path.resolve(__dirname,'../dist'),//服务器所在位置
        //忽略文件
        watchContentBase:true,
        watchOptions:{
            ignored:/node_modules/
        },
        port:'8088',            //端口号
        host:'localhost',       //域名
        open:true,              //自动打开浏览器
        clientLogLevel:'none',  //不显示启动日
        quiet:true,             //显示基本信息，其余不展示
        overlay:false,          //错误不全屏显示
        //解决跨域
        proxy:{
            '/api':{
                target:'http://localhost:3000',
                pathRewrite:{
                    '^/api':''
                }
            }
        }
    }
}
//注：path.join的功能是拼接路径片段。
/*
    path.resolve(__dirname,'../public/index.html')
    相当于
        cd config
        cd ..
        cd public
        cd index.html
*/

　　3、配置package.json文件件

 "server":"webpack-dev-server --config ./config/webpack.config.dev.js"

　　　　注意：json文件中不能用‘’单引号，不能写注释

　　　　

　　4、终端运行  npm run server

　　　　 　　　　 　　　　

　　　　

前端工程化

相关

前端工程化——travis-ci

标签