什么是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. Tomcat启动原理/使用tomcat的应用是如何从tomcat的main函数开始运行的

    从main方法开始打断点,逐步调试,了解程序运行过程 全局唯一的public static void main(String[] args)main Springboot* 内置tomcat,开发的时 ...

  2. python：pytest优秀博客

    上海悠悠:https://www.cnblogs.com/yoyoketang/tag/pytest/

  3. VS2013+OpenCV3.4.2编译

    一.准备工作: (1)在OpenCV官网下载3.4.2版本(注意选择Win pack),https://opencv.org/releases.html. (2)下载Contrib模块,https:/ ...

  4. （转）在高分辨率下eclipse，STS,等软件工具栏图标过小的问题方法总结

    背景:在高分辨率情况下,sts工具栏图标超小,肉眼看不清.按照方法二能够满足需求,开心 https://blog.csdn.net/u012687923/article/details/8032437 ...

  5. jira中使用eazyBI

    参考:https://docs.eazybi.com/eazybijira/set-up-and-administer/set-up-and-administer-for-jira-server/in ...

  6. liunx mysql数据库目录迁移

    1.查看mysql安装目录 从目录etc/my.cnf中查看安装目录 2.进入mysql目录,停止mysql服务 命令: cd usr/local/mysql 命令:service mysql sto ...

  7. 函数的学习2——返回值&传递列表——参考Python编程从入门到实践

    返回值 函数并非总是直接显示输出,相反,它可以处理一些数据,并返回一个或一组值.函数的返回值被称为返回值. 1. 简单的返回值 def get_formatted_name(first_name, l ...

  8. Python3使用xml.dom.minidom和xml.etree模块儿解析xml文件，封装函数

    总结了一下使用Python对xml文件的解析,用到的模块儿如下: 分别从xml字符串和xml文件转换为xml对象,然后解析xml内容,查询指定信息字段. from xml.dom.minidom im ...

  9. Pycharm配置文档教程

    1 桌面找到快捷方式 双击打开 2 3 4 需要自行注册 5 看自己喜欢选择 喜欢白色 选择左边 喜欢黑色 选择右边 6 7 可选 如果你对 Markdown 感兴趣:或者会用 就点击 install ...

  10. 「CTS2019」珍珠

    「CTS2019」珍珠 解题思路 看了好多博客才会,问题即要求有多少种方案满足数量为奇数的变量数 \(\leq n-2m\).考虑容斥,令 \(F(k)\) 为恰好有 \(n\) 个变量数量为奇数的方 ...