什么是Webpack

顾名思义它是一个前端打包工具，通过给定的入口文件自动梳理所有依赖资源（包括css、图片、js等），并按照配置的规则进行一系列处理（转es5、压缩等），打包生成适合现代生产环境要求的文件。同时也借此竖起技术壁垒，防止后端改代码[滑稽]。

npm基本操作

现今前端体系构建在node之上，npm是node的包管理器。webpack、babel等只是工具包，都通过npm安装。

初始化新项目

npm init

全局安装依赖包PACKAGE，不属于具体哪个项目

npm install --global PACKAGE

安装运行时依赖包PACKAGE，会打包至最终生成文件

npm install --save PACKAGE

安装开发时依赖包PACKAGE，不会出现在生成文件中。webpack就属于开发时用来打包文件，在运行时就不需要它了。

npm install --save-dev PACKAGE

执行命令，具体命令配置在package.json中

npm run COMMAND

同时以上安装依赖命令也有简写模式

npm i -g PACKAGE

npm i -S PACKAGE

npm i -D PACKAGE

编写源码

创建并进入项目文件夹

mkdir packme

cd packme

初始化项目

npm init

//之后根据提示输入或默认即可。

创建目录app存放源文件

mkdir app

编写源代码

//Anim.js

class Anim {

    constructor(name = 'unnamed') {

        this.name = name;

    }

    speak() {

        return `hey, i am ${this.name}`;

    }

}

export default Anim;

//Sheep.js

import Anim from './Anim.js'

class Sheep extends Anim {

    constructor(name, age) {

        super(name);

        this.age = age;

    }

}

export default Sheep;

//index.js

import Sheep from './Sheep.js';

import base from './base.css';

import index from './index.css';

let sheep = new Sheep('doly', 1);

let target = document.getElementById('logs');

target.innerHTML = sheep.speak();

/*base.css*/

html,

body {

    padding: 0;

    margin: 0;

    height: 100%;

}

/*index.css*/

#logs {

    border: 1px solid #ccc;

    height: 80px;

    overflow: auto;

} 
<!-- index.tpl.html -->

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div id="logs"></div>

</body>

</html>

整体项目目录如图所示

构建目标

源码编写好了，梳理一下我们的构建目标。

js使用了es6，需要转换成es5

js合并到一个文件

压缩js

css合并到一个文件

压缩css

开始构建

安装依赖包

//webpack 负责整个流程

npm i -D webpack

//babel 负责es6转换

npm i -D babel-core babel-cli babel-loader babel-preset-es2015

//压缩js

npm i -D terser-webpack-plugin

//抽取处理过的css到单独文件（默认css会被当作模块引入js中）

npm i -D mini-css-extract-plugin

//压缩css

npm i -D optimize-css-assets-webpack-plugin

//将打包后的js、css插入指定html

npm i -D html-webpack-plugin

创建webpack配置文件

//webpack.config.js

//配置文件本身是js，它交给node执行。所以可以使用模块语法、特殊变量等特性。

//声明引入插件

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

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const TerserJsPlugin = require('terser-webpack-plugin');

const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {

    mode: 'production',//production默认会压缩代码，development则不会。

    devtool: 'cheap-module-source-map',//控制生成sourceMap的方式

    entry: __dirname + '/app/index.js',//入口文件，多个入口可以对象kv方式传入

    output: {

        path: __dirname + '/build',

        filename: 'bundle-[contenthash:8].js'

    },

    optimization: {

        minimizer: [ //配置js、css压缩器

            new TerserJsPlugin({

                cache: true,

                parallel: true,

                sourceMap: true

            }),

            new OptimizeCssAssetsPlugin()

        ]

    },

    module: {//配置不同文件的处理规则，

        rules: [{

                test: /\.js$/,

                exclude: /node_modules/,

                loader: 'babel-loader',

                query: {//指定babel使用的参数

                    presets: ['es2015']

                }

            },

            {

                test: /\.css$/,

                use: [//多个处理器从后往前调用，先预处理好css再抽取到文件

                    MiniCssExtractPlugin.loader,

                    'css-loader'

                ]

            }

        ]

    },

    plugins: [//配置处理插件

        new HtmlWebpackPlugin({//根据指定模板生成html,包含打包的后js、css

            template: __dirname + '/app/index.tpl.html',

            minify: {

                minimize: true,

                collapseWhitespace: true,

                minifyCSS: true,

                minifyJS: true

            }

        }),

        new MiniCssExtractPlugin({//合并的css文件配置

            filename: 'style-[contenthash:8].css',

            ignoreOrder: false

        })

    ],

    devServer: {//开发服务器，便于浏览器测试访问

        contentBase: './build',

        port: 8090,

        historyApiFallback: true,

        inline: true

    }

}

添加构建命令

//package.json

//修改scripts配置，加入相关命令

    "scripts": {

        "build": "webpack",

        "dev": "webpack-dev-server"

    },

执行构建

//开启本地服务器，只用一次

npm run dev

//执行webpack构建

npm run build　　

构建结束，在build目录下生成新文件

Webpack快速入门的更多相关文章

  1. webpack快速入门——实战技巧：watch的正确使用方法，webpack自动打包

    随着项目大了,后端与前端联调,我们不需要每一次都去打包,这样特别麻烦,我们希望的场景是,每次按保存键,webpack自动为我们打包,这个工具就是watch! 因为watch是webpack自带的插件, ...

  2. webpack快速入门——CSS进阶：自动处理CSS3前缀

    为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 1.安装 cnpm i postcss-loader aut ...

  3. webpack快速入门——如何安装webpack及注意事项

    1.window+R键,输入cmd打开命令行工具,输入 mkdir XXXX(XX:文件夹名): 2.cd XXX 进入刚刚创建好的文件夹里,输入cnpm install -g webpack (安装 ...

  4. webpack快速入门——webpack3.X 快速上手一个Demo

    1.进入根目录,建两个文件夹,分别为src和dist 1).src文件夹:用来存放我们编写的javascript代码,可以简单的理解为用JavaScript编写的模块. 2).dist文件夹:用来存放 ...

  5. webpack快速入门——配置文件：入口和出口，多入口、多出口配置

    1.在根目录新建一个webpack.config.js文件,然后开始配置: const path = require('path'); module.exports={ //入口文件的配置项 entr ...

  6. webpack快速入门——配置文件：服务和热更新

    1.在终端安装 cnpm i webpack-dev-server --save-dev 2.配置好后执行 webpack-dev-server,这时候会报错 出现错误,只需要在pagejson里配置 ...

  7. webpack快速入门——CSS文件打包

    1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ background:pink; color:yellowgreen; } 2.css建立好后,需要引 ...

  8. webpack快速入门——配置JS压缩，打包

    1 .首先在webpack.config.js中引入 const uglify = require('uglifyjs-webpack-plugin'); 2.然后在plugins配置里 plugin ...

  9. webpack快速入门——插件配置：HTML文件的发布

    1.把dist中的index.html复制到src目录中,并去掉我们引入的js 2.在webpack.config.js中引入 const htmlPlugin = require('html-web ...

  10. webpack快速入门——CSS中的图片处理

    1.首先在网上随便找一张图片,在src下新建images文件夹,将图片放在文件夹内 2.在index.html中写入代码:<div id="pic"></div& ...

随机推荐

  1. centos 如何修改docker镜像和容器的默认存放路径

    原因:通过df -h查看磁盘利用的时候,目前挂载的太小了,所以尝试挂载到其他地方 1 先看看默认存放的路径在哪儿 方法1:docker info 方法2:sudo docker info | grep ...

  2. JAVA克隆对象报错：The method clone() from the type Object is not visible

    将一个对象复制一份,称为对象的克隆技术.在Object类汇总存在一个clone()方法:protected Onject clone() throws CloneNotSupportedExcepti ...

  3. OpenGL和EGL入门

    一.简介 EGL 是渲染 API(如 OpenGL ES)和原生窗口系统之间的接口. 通常来说,OpenGL 是一个操作 GPU 的 API,它通过驱动向 GPU 发送相关指令,控制图形渲染管线状态机 ...

  4. Charles手机代理设置

      Charles工具 手机 方法/步骤     1.打开Charles   点击Proxy,选择proxy settings,输入端口8888   打开电脑,在cmd中输入ipconfig,查看本地 ...

  5. GhostScript说明

    关于ghostscript(以下简称gs).Gs是一个地下工作者,一般用户不熟悉它,因为它上不和用户直接打交道,下不直接接触打印机.但是在打印工作中它却扮演了极为重要的解色. 一般从用户常见文件如图片 ...

  6. libevent实现TCP 客户端

    ibevent实现Tcp Client基于bufferevent实现 #include <stdio.h> #include <unistd.h> #include <s ...

  7. makefile从0到1

    一.什么是makefile 百度百科:Linux 环境下的程序员如果不会使用GNU make来构建和管理自己的工程,应该不能算是一个合格的专业程序员,至少不能称得上是Unix程序员.在 Linux(u ...

  8. java.IO.EOFException异常

    错误代码为: 43 boolean booleanResult = dis.readBoolean();//dis为DateInputStream的实例 44 System.out.println(b ...

  9. Linux 中的 ~/. 表示的意思

    在Linux中, ~ 表示用户的目录, 如用户名是Gavin, 那么~/表示  /home/Gavin 所以~/. 表示 用户目录下的隐藏文件. 扩展: 若以用户身份登录 ~ 表示 /home  目录 ...

  10. BZOJ4141 THUSC2013 魔塔 贪心

    没得传送门 考虑当\(Atk\)增大时,\(Def\)一定越来越没用,因为回合数在变少.所以考虑从小到大枚举\(Atk\)然后双指针计算. 设\(f_i(x)\)表示在\(Atk = i\)时,\(D ...