关闭

webpack学习笔记

时间: 2019-12-03阅读: 520标签: 学习

一、npm

1.npm是随同Nodejs一起安装的包管理工具
2.安装

npm install npm -g
npm -v 测试是否成功安装

3.使用淘宝镜像(cnpm命令)

npm install -g cnpm --registry=https://registry.npm.taobao.org

4.安装模块

npm install <Module Name>

安装好之后,模块包就放在了工程目录下的node_modules目录中,因此在代码中只需要通过

require('express')的方式就可引入,无需指定第三方包路径。
var express = require('Module Name');

5.全局安装与本地安装

npm install express          # 本地安装
npm install express -g     # 全局安装

本地安装将安装包放在./node_modules下(运行npm命令时所在的目录),
可以通过require()来引入本地安装的包。
全局安装将安装包放在/usr/local下或者你node的安装目录,
可以直接在命令行里使用。
6.Package.json主要属性说明
name-包名。
version-包的版本号。
description-包的描述。
homepage-包的官网url。
author-包的作者姓名。
contributors-包的其他贡献者姓名。
dependencies-依赖包列表。如果依赖包没有安装,npm会自动将依赖包安装在node_module目录下。
repository-包代码存放的地方的类型,可以是git或svn,git可在Github上。
main-main字段指定了程序的主入口文件,require('moduleName')就会加载这个文件。这个字段的默认值是模块根目录下面的 index.js。
keywords-关键字.
scripts-脚本命令
7.常用命令
查看安装信息 npm list -g
查看具体某个模块 npm list moduleName
卸载模块 npm uninstall moduleName
更新模块 npm update moduleName
搜索模块 npm search moduleName
创建模块 npm init/npm init -y(跳过描述)
发布模块 npm publish
帮助命令 npm help
npm cache clear 可以清空NPM本地缓存


二、webpack

1.webpack是一个JS应用程序的静态模块打包器。可以实现打包、转化、压缩优化等功能。
2.webpack构成
    入口 entry
    出口 output
    loaders 转化器
    plugins 插件
    devServer 简单开发用服务器
    mode 开发模式/生产环境
3.安装webpack
npm install webpack -g
npm install webpack-cli -g
webpack -v
4.安装依赖模块
npm i jquery
npm un jquery
npm i jquery --save-dev (生产模式 不压缩优化)
npm i jquery --save (生产模式 压缩优化)
如果不加--save和-save-dev参数,模块依赖不会加入到package.json
5.默认目录结构
webpack-work
    dist-输出文件夹
    node_modules-依赖模块文件夹
    src-源码文件夹
        index.js-入口文件
    package.json
6.初始化
npm init
npm init -y 跳过描述
npm init 并且在当前目录下配置package.json文件,根据package.json初始化。
7.快速打包
webpack src\index.js --output dist\
8.webpack.config.js内容
module.exports={
    entry:{}         //入口配置-必须
    output:{}      //出口配置-必须
    module:{}     //module.rules loaders
    plugins:{}     //插件
    devServer:{} //开发服务器
}
样例:
const path = require('path');
module.exports={
    entry:{
        a:'./src/index.js' //a是key值,自定义即可。
    },
    output:{
        //path:__dirname+'/dist',//必须为绝对路径 __dirname是node内置函数,指当前绝对路径
        path:path.resolve(__dirname,'dist'),
        filename:'[name].bundle.js'
    }
}
9.默认使用webpack.config.js配置文件
也可指定配置文件,如:webpack --config custom.config.js
也可在package.json中配置脚本,使用npm run XXX 执行。

webpack --mode development 开发模式 不压缩
webpack --mode production 生产模式 压缩


三、常用插件

1.html-webpack-plugin
功能:实现对html的支持,依赖本地webpack和webpack-cli
安装:cnpm i html-webpack-plugin -D
引入:const HtmlWebpackPlugin = require('html-webpack-plugin');
使用:
new HtmlWebpackPlugin({
            filename:'index.html',
            chunks:['a'], //包含的js
            minify:{
                collapseWhitespace:true, //压缩空白
                removeAttributeQuotes:true //删除属性双引号
            },
            hash:true, //生成js链接随机数,防止缓存
            title:'wdwtest',
            template:'./src/index.html' //模板,可省略
})
2.clean-webpack-plugin
功能:清除某些东西
下载:cnpm i clean-webpack-plugin -D
引入:const {CleanWebpackPlugin} = require('clean-webpack-plugin');
使用:new CleanWebpackPlugin();
3.devServer
功能:内置开发服务器
下载:cnpm i webpack-dev-server -D
使用:
devServer:{
    contentBase:path.resolve(__dirname,'dist'), //设置服务器访问的基本目录
    host:'localhost', //服务器IP
    port:'8090',
    open:true, //自动打开浏览器
    hot:true //打开热部署
}
启动:webpack-dev-server --mode development
或配置package.json使用npm run dev命令执行
"scripts": {
    "dev": "webpack-dev-server --mode development"
  },
4.压缩
1)4.0版本 可以使用--mode production进行压缩。
使用--mode development开启调试。
2)4.0以前版本可以使用uglifyjs-webpack-plugin
cnpm i uglifyjs-webpack-plugin -D
const uglify= require('uglifyjs-webpack-plugin');
new uglify();
使用devtool:'source-map'开启调试
5.copy-webpack-plugin
静态资源输出,复制静态资源。
下载:cnpm i copy-webpack-plugin -D
引入:const CopyWebpackPlugin = require('copy-webpack-plugin');
使用:
plugins:[
    new CopyWebpackPlugin([{
        from:path.resolve(__dirname,'src/assets'),
        to:'./public'
    }])
]
6.图片插件
下载:cnpm i file-loader url-loader -D
使用:
{
    test:/\.(png|jpg|gif)$/,
    use:[{
        loader:'url-loader',
        options:{
            limit:5000 //小于该大小的图片会转换成base64.
        }
    }]
}
7.分离css插件
下载:
cnpm i extract-text-webpack-plugin@next -D
使用:
const ExtractTextPlugin=require('extract-text-webpack-plugin');
new ExtractTextPlugin(要提取出去的路径)
{    test:/\.css$/,
    use:ExtractTextPlugin.extract({
        fallback:'style-loader',
        use:'css-loader',
        publicPath:'../'    //解决css背景图路径问题
    })
}
8.消除冗余css
下载:
cnpm i purifycss-webpack purify-css glob -D
使用:
const PurifyCssWebpack = require('purifycss-webpack');
const glob = require('glob');
new PurifyCssWebpack({
    paths:glob.sync(path.join(__dirname,'src/*.html'))
})


四、loader

1.loader起到加载器、转化器的作用,类似插件。
2.css处理
webpack默认只能处理js,需要相应的loader插件进行css处理。
style-loader、css-loader。
下载:

cnpm i style-loader css-loader -D

使用:

module:{
    rules:[
        {
            test:/\.css$/,
            use:['style-loader','css-loader']
            //或 loader:['style-loader','css-loader']
            //或
            //use:[
            //    {loader:'style-loader'},
            //    {loader:'css-loader'}
            //  ]
        }
    ]
}


五、babel

下载:
cnpm i babel-loader babel-core babel-preset-env -D
使用:
{
    test:/\.(js|jsx)$/,
    use:[{
        loader:'babel-loader',
        options:{
            preset:'env'
        }
    }],
    exclude:/node_modules/
}


六、引用

1.导出模块
function show(){
        return '我是新模块'
}
module.exports=show;
引入模块
require('./show');
2.webpack3以后支持直接引入json
const jsonConfig = require('./config.json');
3.使用第三方库
1)直接引入
import $ from 'jquery'
2)ProvidePlugin
const webpack=require('webpack');
new webpack.ProvidePlugin({
    $:'jquery',
    xxx:'xxxx'
})
3)import $...,引入之后,无论代码中是否使用到了jquery,打包都会打进去,产生冗余js。
ProvidePlugin方式,只有实际用到此库时,才会打包进去。
4)提取第三方库
optimization:{
    splitChunks:{
        cacheGroups:{
            aaa:{
                 //chunks:'initial',
                 test: path.resolve(__dirname, 'src/js/jquery.min.js'),
                 name:'jquery',
                chunks: "all",
                //minSize: 1,
                priority: 0
            }
        }
    }
}


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/7129

关闭

新手学习WEB前端流程以及学习中常见的误区

学习web前端编程技术肯定是以就业拿到高薪工作为主要目的的,可是高薪不会那么轻易拿到,这是一个最简单的道理。没有付出就没有回报,在整个学习web前端编程技术的过程中,你需要付出时间、精力、金钱

女生学ui还是前端好?

UI设计和Web前端都是当今比较火爆的互联网热门岗位,市场需求量很大,薪资待遇较高,自然引来越来越多人的学习。但是学习IT培训的学员们总是很犯难,对于女生而言:到底是学UI设计好,还是Web前端好?

新手学习Web前端的高效学习方法

作为新手,出于对风险的担心,不免在学习一项新技能或者转投一个新行业的时候,有所犹豫与徘徊。毕竟,在这场类似冒险的选择中,我们需要投入时间、精力以及承受相关的经济损失。但是,只有勇敢迈出第一步

学习JavaScript需要注意什么?

JavaScript不只是开发网页特效和渲染数据的重要内容,在学习前端开发的后期,大量使用算法和框架的时候,对JavaScript基础的考验也是很多的。那么学习JavaScript需要注意什么?

前端为什么要学习vue.js

这几年Vue.js成为前端框架中最火的一个。越来越多的网站前端开始采用Vue.js开发。是开源世界华人的骄傲,其作者是我国尤雨溪。为了给个人开发提供更多的机遇打造出门槛低,成本低,跨设备和多平台的Vue.js.

如何学习前端?前端学习路线总结

随着多屏互动和多端兼容友好的界面变得越来与重要,前端工程师也成为了热门的研发技术岗位之一。随着就业市场大环境的改变,一方面是前端人才的紧缺,另一方面是对前端求职者的要求增高

关于JavaScript到底该如何学习?

不要着急看一些复杂网页效果的代码,这样除了打击你自信心,什么也学不到。没达到一定的武功水平,割了小JJ也学不会葵花宝典的。别急着加技术交流QQ群,加牛人QQ

程序员提升学习效率的3个方法

才3个方法?如果你希望的是提升效率的10大方法,程序员必看的20个学习法......很抱歉,本文不适合你。在精而不在多,一个人若能够学会,并且长期践行这其中一种方法,便已经能够走在很多人前头了。

20多岁的人做什么,将来不会后悔?

这个标题有点大,起这个标题的时候我自己都有点害怕,事情是这样的,前两天在知乎上写了一个回答叫20多岁的人做什么,将来不会后悔?我正好也是20多岁,就回答了这个问题

Web前端自学之路学习路线,web前端开发网站

前端开发作为一个由网页制作演变成的新兴岗位,其实在国内外来说,受到重视的时间并不长,在前几年间技术快速的发展和其应用普及率的迅猛增长,使得前端人才市场一片盛况空前的景象,由于其的易入门性和不错的发展前景,吸引了众多前端爱好者和转行人员的青睐。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!