前端构建工具 -- Webpack

ningwang 发布于2019-08-22 16:46 / 3417人阅读

摘要：我们需要在文件里，通过的方式来引入，我们来看具体的方法，首先需要安装，安装的目的是为了在中以的方式嵌入

前言

scss（sass）、less是css的预处理语言，采用其可以得到更规范，更清晰的css代码，typescript是javascript基础上扩展的代码，使我们能使用javascript不能使用的特性，并且可以转换为js代码

但这些语言编写的代码都需进行处理才能变成浏览器能识别的代码，手动处理又太过繁琐，所以使用webpack等自动打包工具就比较方便

1、简介

Webpack : 是前端打包工具，它从主文件（如index.html）开始，检查其依赖的模块文件，并将其中JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等）进行转换和打包成为一个（或多个）js文件
Grunt/Guip : 优化前端开发流程的工具，在一个配置文件中设置指定文件的编译，组合，压缩等任务的具体步骤，工具自动完成该任务

2、安装Webpack

使用npm安装webpack模块，在webpack 3中，webpack本身和它的CLI以前都是在同一个包中，但在第4版中，他们已经将两者分开来更好地管理它们,所以在webpack 4中需要先全局安装webpack和webpack-cli。
使用npm安装webpack模块:

npm install -g webpack
npmt install -g webpack-cli

3、使用webpack打包项目入门

1、使用终端用webpack打包简单文件
webpack 4不能使用webpack 入口文件出个文件 进行打包了，它的打包方式为默认入口文件是src目录下的Index.js文件，目的文件是dist目录下的main.js文件，打包命令行是,执行该命令行之后就能在dist目录下出现打包完成的文件main.js

webpack --mode development

2、使用webpack打包复杂项目
首先新建一个文件夹webpack-demo,其下有文件夹css和js,css文件夹里有
创建package.json : npm install
安装依赖包：

npm install webpack --save-dev
npm install jquery --save-dev
npm install style-loader css-loader --save-dev 
npm install extract-text-webpack-plugin –-save-dev

新建一个webpack.config.js文件进行打包配置：

var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
    entry:"./js/main.js",
    output: {
        path: "/dist",
        filename: "bundle.js"
    },

    plugins: [
        new ExtractTextPlugin ("./style.css")
    ],

    module: {
        rules: [
            {
                test: /.css$/,
                loader:ExtractTextPlugin.extract("style-loader","css-loader")
            }
        ]
    }
};

注：在webpack v2 之后loaders都用rules替代了
使用webpack进行打包webpack
注：如果运行提示 command not found可以这么操作node_modules/.bin/webpack
自定义shell命令来操作的。$ alias lwebpack="node_modules/.bin/webpack"

我们需要在js文件里，通过require的方式来引入css，我们来看具体的方法，首先需要安装css-loader，
style-loader(安装style-loader的目的是为了在html中以style的方式嵌入css)

云服务器 GPU云服务器前端构建构建工具 android构建工具自动化构建工具

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94654.html

【前端构建】WebPack实例与前端性能优化

摘要：感受构建工具给前端优化工作带来的便利。多多益处逻辑清晰，程序注重数据与表现分离，可读性强，利于规避和排查问题构建工具层出不穷。其实工具都能满足需求，关键是看怎么用，工具的使用背后是对前端性能优化的理解程度。这篇主要介绍一下我在玩Webpack过程中的心得。通过实例介绍WebPack的安装，插件使用及加载策略。感受构建工具给前端优化工作带来的便利。 showImg(https://se...

QiShare 2019-08-19 17:48 评论0 收藏0
Javascript五十问——从源头细说Webpack与Gulp

摘要：前言与是目前圈子内比较活跃的前端构建工具。对于初学者来说，对这二者往往容易认识不清，今天，就从事件的源头，说清楚与。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。打包后形成的文件出口。前言：Webpack 与 gulp是目前圈子内比较活跃的前端构建工具。网上有很多二者比较的文章，面试中也会经常遇到gulp，Webpack的区别这样的问题。对于初学者来说，对这二...

lwx12525 2019-08-23 14:47 评论0 收藏0
前端模块化和构建工具

摘要：以前一直对前端构建工具的理解不深，经过几天的研究特意来总结一下，第一次写博客，有写错的请多多见谅，该文章我也从其他博客拷了一些内容，如果有冒犯之处，请指出。强大的设计使得它更像是一个构建平台，而不只是一个打包工具。以前一直对前端构建工具的理解不深，经过几天的研究特意来总结一下，第一次写博客，有写错的请多多见谅，该文章我也从其他博客拷了一些内容，如果有冒犯之处，请指出。如今，网页不再...

ad6623 2019-08-20 18:37 评论0 收藏0
前端通用国际化解决方案

摘要：前端通用国际化解决方案背景前端技术日新月异，技术栈繁多。接下来针对这几块内容并结合日常的开发流程说明国际化的通用解决方案。文章首发于个人blog，欢迎大家关注。 DI18n 前端通用国际化解决方案背景前端技术日新月异，技术栈繁多。以前端框架来说有React, Vue, Angular等等，再配以webpack, gulp, Browserify, fis等等构建工具去满足日常的开...

lingdududu 2019-08-20 15:46 评论0 收藏0
如何打造一个令人愉悦的前端开发环境（一）

摘要：我觉得这方面的原因是当时对和的依赖，导致大家对的兴趣不弄，错过了最佳时机，这个其实跟百度自己的的技术栈有很大关系。这个阮一峰对于前端构建的变化吐槽过，说新的构建工具就是的构建工具。文章来源最近几年，前端发展越来越迅速，各种萌新加入了前端这个大家庭，大有赶IOS、超Android的趋势呀！同时，萌新们提出了各种前端工作问题，除了最基础的html、css、js三板斧之外，最让人头疼的应...

KavenFan 2019-08-02 16:21 评论0 收藏0