【webpack】学习记录（一）

时间 2019-11-13

标签 webpack 学习记录繁體版

原文原文链接

[TOC]javascript

简介

官网css

webpack是以模块依赖和生成静态资产表明这些模块。通俗一点理解就是，把全部依赖的脚本，样式，统一打包，减小前端请求，而且可压缩，可混淆html

优点

支持ES6
支持AMD/CMD
插件丰富
并压/混淆，模块依赖
减小网络请求，加快前端渲染
利于模块化开发

劣势

须要了解node.js
存在学习成本
不利于入门学习
debug困难

相似框架

grunt
gulp
bower
karma

入门例子

依赖node.js
依赖webpack模块

安装依赖

node.js 安装

下载后执行前端

node -v

运行成功则安装成功java

webpack 模块依赖

npm install webpack -g

**-g**表明全局安装node

项目下使用webpack

全部命令在项目根目录执行webpack

初始化

npm init

执行该命令，会要求输入一些，如项目项目名，项目描述，做者，等信息，执行完后会出现一个package.json的文件在项目的根目录git

项目加入依赖

webpack

npm install webpack --save-dev

改命令执行后会修改package.json，在devDependencies下加入了webpackgithub

固然也能够经过@来指定其余版本如web

npm install webpack@1.2.x --save-dev

css-loader style-loader

让项目支持css压缩和样式加载器

npm install css-loader style-loader

目录结构

入口文件（index.html）

bundle.js 是压缩以后的文件，是webpack自动生成，下面会说

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="../scripts/bundle.js" charset="utf-8"></script>
</body>
</html>

业务脚本（content.js）

module.exports = "It works from content.js!";

样式脚本（style.css）

body {
    background: yellow;
}

入口脚本（entry.js）

require("../css/style.css");
document.write(require("./content.js"));

webpack配置（webpack.config.js）

module.exports = {
    //入口脚本
    entry: "./src/modules/main/scripts/entry.js",
    //输出
    output: {
        //输出目录
        path: './src/modules/main/scripts',
        //输出脚本
        filename: "bundle.js"
    },
    module: {
        //压缩器
        loaders: [
            //css后缀的，采用style!css压缩器
            { test: /\.css$/, loader: "style!css" }
        ]
    }
};

执行命令

webpack

结果

直接访问index.html

存在问题

每次须要执行命令打包繁琐
脚本多个时还不能加入依赖
目录结构配置困难
打包后文件名过于死板

该上面的问题会获得解决，在后面的博文进行写出

【webpack】学习记录 （一）

简介

优点

劣势