webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

1.安装webpack

　　1.1需要先在项目中npm init初始化一下，生成package.json

1.2 npm install webpack webpack-cli -D

2.webpack配置

在根目录创建一个webpack.config.js文件，用于配置一些webpack，所有的配置项都会在webpack进行配置。并在目录里面创建一个src目录。然后再src目录创建一个index.js文件和html文件。

在index.html文件中写入一个div标签

<!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>webpack配置学习</title>

</head>

<body>

    <div id="root"></div>

</body>

</html>

webpack配置目录

const path = require('path')

module.exports = {

    mode: 'development',

    entry: './src/index.js' //入口文件

    output: {

        //出口

        path: path.resolve(__dirname, 'dist'), //打包生成的目录
        filename: 'index.js'  //生成目录的文件名字,单个js文件使用  
    } 
}

配置多文件打包,如果是两个js文件

entry: {

        main: './src/index.js', //入口文件

        sub: './src/index.js'

    },

这时候需要在output中的filename中配置

filename: '[name].js' //打包生成目录多个js文件的时候

2.1webpack配置图片

在我的src目录中准备一张图片，在index.js中写入

import avatar from './item.png'

var img = new Image()

img.src = avatar

var root = document.getElementById('root')

root.append(img)

配置webpack模块化(module),首先先安装,选择使用yarn的方式安装

yarn add  url-loader --save-dev
module: {

        rules: [

            {

                test: /\.(png|jpg|gif)$/,

                use: {

                    loader: 'url-loader',

                    options: {

                        name: '[name]_[hash].[ext]', //图片名字加上hash值

                        outputPath: 'images/', //打包之后图片存放的一个目录里面

                        limit:

                            //limit图片大小设置，如果超过10240字节，打包会生成目录和图片，如果没有超过设置的大小，会默认打包压缩在js中的base64

                    }

                }

            }

        ]

    },

在package.json文件配置，每次执行 npm run dev就会打包，会在你的根目录生成dist目录

"scripts": {

        "dev": "webpack"

    },

2.2webapck对css(scss)预处理器处理

首先需要安装下面这些插件

yarn add  css-loader --save-dev

yarn add node-sass --save-dev

yarn add sass-loader --save-dev

yarn add scss-loader --save-dev

yarn add style-loader --save-dev

在webapck中写入

module: {

        rules: [

            {

                test: /\.scss$/,

                // css-loader处理css文件 style-loader把css-loader处理好的文件挂载到header标签上，sass-loader对scss预处理器配置,postcss-loader处理css前缀

                use: [

                    'style-loader',

                    {

                        loader: 'css-loader',

                        options: {
　　　　　　　　　　　　　　　　modules: true, //模块化打包，
　　　　　　　　　　　　　　　 importLoaders:  //每次加载都会执行sass-loader和postcss-loader  
　　　　　　　　　　　　　　} 
　　　　　　　　　　　　}, 
　　　　　　　　　　　　'sass-loader', 
　　　　　　　　　　　　'postcss-loader'  浏览器前缀
　　　　　　　　　　] 
　　　　　　　　} 
　　　　　　] 
　　　　},

如果想对css进行模块化处理，需要配置

options: {

　modules: true, //模块化打包，

　importLoaders:  //每次加载都会执行sass-loader和postcss-loader

}

在目录中创建一个scss文件，写入一些简单的css文件

body {

    .avatar {

        width: 50%;

        border: 1px solid red;

        transform: translate(100px, 100px);

    }

}

　在index.js文件中写入

import avatar from './item.png'
import createdAvatar from './createdAvatar.js'  引入js文件
import style from './index.scss'

var img = new Image()

img.src = avatar

img.classList.add(style.avatar)

var root = document.getElementById('root')

root.append(img)
createdAvatar() //使用
 

在创建一个js文件，然后再index.js文件中引入，

import avatar from './item.png'

function createdAvatar() {

    var img = new Image()

    img.src = avatar;

    img.classList.add('avatar')

    var root = document.getElementById('root');

    root.append(img)

}

export default createdAvatar;

　　打包之后可以在浏览器看到，有样式，一个没有

在上面的css中，我们使用了css3，但是浏览器并没有自动给我加上前缀，这时候，需要我们手动配置一些。

安装

yarn add postcss-loader --save-dev

需要在你的根目录创建一个postcss.config.js文件，

安装

yarn add autoprefixer --save-dev

使用，

module.exports = {

    plugins: [

        require('autoprefixer')

    ]

}

// 用与处理css在不同浏览器自动加上前缀问题

　　然后再你的css配置中使用 postcss-loader，运行打包，再次在浏览器可以看到，对于一些css3浏览器自动加上前缀

2.3webpack对字体进行处理

先行iconfont下载一些字体，放入自己的src目录里面，需要在index.js文件引入并使用

import './iconfont.scss'

var root = document.getElementById('root')

root.innerHTML = "<div class='iconfont iconchangjingguanli'></div>"

然后需要在webpack进行一些配置，首先安装一个插件

yarn add file-loader --save-dev

使用

module: {

        rules: [{

                test: /\.(eot|ttf|svg)$/,

                use: {

                    loader: 'file-loader'

                }

            }

        ]

    },

再次运行npm run dev打包之后，可以在浏览器看到我们的字体图标了

2.4webpack配置html打包文件处理

如果想每次打包之后，dist目录都会给我们生成一个html文件，这时候需要安装一个插件

yarn  add html-webpack-plugin --save-dev

然后在webapck.config.js文件中引入

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

　使用 HtmlWebpackPlugin打包之后自动生成html文件，

plugins: [

        new HtmlWebpackPlugin({

            template: 'src/index.html'

        })

    ],

　　

每次打包需要重新更新一下dist目录，删除里面的文件，重新生成一个新的，这时候需要安装另一个插件

yarn  add  clean-webpack-plugin --save-dev

　也是需要在webpack.config.js引入

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

　　使用和HtmlWebpackPlugin一样

plugins: [

        // HtmlWebpackPlugin打包之后自动生成html文件，

        new HtmlWebpackPlugin({

            template: 'src/index.html'

        }),

        // CleanWebpackPlugin打包之前先自动清除dist目录里面所有的文件，

        new CleanWebpackPlugin()

    ],

　　

2.5SourceMap配置，用于检测在代码打包之后，检测问题，定位到那个行

module.exports = {

    devtool: 'cheap-inline-source-map',

}

　　配置选项如下

　　//source-map 打包之后会生成map文件，性能比较慢，用于检测代码打包之后错误信息提示

    //eval 打包最快，不会生成.map文件，

    //inline-source-map 打包不会生成.map文件，在打包的js文件生成base64

    //如果是在development 开发环境  使用cheak-module-eval-source-map,不会生成.map文件，但是集成在打包之后main.js中eval中

    //cheap-inline-source-map 打包不会生成.map文件，在打包的js文件生成base64

    //如果是在production 线上环境 使用cheak-module-source-map,会打包生成.map文件

webpack配置插件特别多，需要慢慢的来，理解常用的场景配置就可以了。剩下的需要单独查阅资料就可以了解其中配置以及原理

webpack4配置学习(一)的更多相关文章

  1. AgileEAS.NET SOA 中间件平台5.2版本下载、配置学习(四)：开源的Silverlight运行容器的编译、配置

    一.前言 AgileEAS.NET SOA 中间件平台是一款基于基于敏捷并行开发思想和Microsoft .Net构件(组件)开发技术而构建的一个快速开发应用平台.用于帮助中小型软件企业建立一条适合市 ...

  2. AgileEAS.NET SOA 中间件平台5.2版本下载、配置学习(三)：配置ActiveXForm运行环境

    一.前言 AgileEAS.NET SOA 中间件平台是一款基于基于敏捷并行开发思想和Microsoft .Net构件(组件)开发技术而构建的一个快速开发应用平台.用于帮助中小型软件企业建立一条适合市 ...

  3. AgileEAS.NET SOA 中间件平台5.2版本下载、配置学习(二)：配置WinClient分布式运行环境

    一.前言 AgileEAS.NET SOA 中间件平台是一款基于基于敏捷并行开发思想和Microsoft .Net构件(组件)开发技术而构建的一个快速开发应用平台.用于帮助中小型软件企业建立一条适合市 ...

  4. Tomcat集群配置学习篇-----分布式应用

    Tomcat集群配置学习篇-----分布式应用 现目前基于javaWeb开发的应用系统已经比比皆是,尤其是电子商务网站,要想网站发展壮大,那么必然就得能够承受住庞大的网站访问量:大家知道如果服务器访问 ...

  5. Chapter 2. OpenSSL的安装和配置学习笔记

    Chapter 2. OpenSSL的安装和配置学习笔记 2.1 在linux上面安装OpenSSL我还是做点No paper事情比较在行,正好和老师的课程接轨一下.以前尝试过在Windows上面安装 ...

  6. webpack4配置详解之常用插件分享

    前言 继上一次webpack的基础配置分享之后,本次将分享一些工作中项目常用的配置插件.也会包含一些自己了解过觉得不错的插件,如有分析不到位的,欢迎纠错,嗯,这些东西文档都有,大佬可绕过. Wepac ...

  7. redis 安装配置学习笔记

    redis 安装配置学习笔记 //wget http://download.redis.io/releases/redis-2.8.17.tar.gz 下载最新版本 wget http://downl ...

  8. 转载 Tomcat集群配置学习篇-----分布式应用

    Tomcat集群配置学习篇-----分布式应用 现目前基于javaWeb开发的应用系统已经比比皆是,尤其是电子商务网站,要想网站发展壮大,那么必然就得能够承受住庞大的网站访问量:大家知道如果服务器访问 ...

  9. vue第二单元(webpack的配置-学习webpack的常用配置)

    第二单元(webpack的配置-学习webpack的常用配置) #课程目标 掌握webpack的常用配置 掌握如何根据实际的需求修改webpack的对应配置 了解webpack-dev-server的 ...

随机推荐

  1. RocketMq在SparkStreaming中的总结

    其实Rocketmq的给第三方的插件已经全了,如果大家有兴趣的话请移步https://github.com/apache/rocketmq-externals.本文主要是结合笔者已有的rmq在spar ...

  2. shell 解析 json

    如果 想利用 shell 从 json 数据 中 解析出某个字段, 可以 利用 正则匹配, 比如 想 解析出 "spanId":"8461203268866670975& ...

  3. 2019 AI Bootcamp Guangzhou 参会日记

    2019年的全球AI训练营在北京.上海.广州.杭州.宁波五个地方同时举办! 12月14日,微软全球AI Bootcamp活动再次驾临广州,本次会议结合 ML.NET 和基于 SciSharp 社区介绍 ...

  4. WPF 画一个3D矩形并旋转

    具体的代码还是线性代数. 主要是旋转和平移. 这个例子的中模型是在世界原点建立.所以旋转会以自身轴心旋转. 如果不在世界原点建立模型,还想以自身为旋转轴旋转. 则是需要以下步骤: 模型的中心点为V1( ...

  5. ARTS-S gitlab与jenkins实现持续集成

    jenkins配制 系统管理->管理插件->可选插件->选择安装 Gitlab Hook Plugin和Build Authorization Token Root Plugin插件 ...

  6. git避免每次输入密码

    生成公匙 在仓库所在目录输入 ssh-keygen -t rsa -C "yourname@sina.com" 其中yourname@sina.com是注册邮箱.可以在%HOME% ...

  7. 层叠机制和继承的概念以及CSS中选择器的优先级

    层叠机制: 一个元素的某个特定的样式属性可能来自行间的style属性.内联样式表或者外部引入的样式表,以及浏览器自定义的样式,还有就是继承自父元素的样式,但是最终只会选择其中的某一个来表示,这个选择的 ...

  8. Python3 并发编程3

    目录 GIL全局解释器锁 基本概念 多线程的作用 死锁现象 递归锁 信号量 线程队列 GIL全局解释器锁 基本概念 global interpreter lock 全局解释器锁 GIL不是Python ...

  9. 【Web技术】334- yarn、npm、cnpm 三者如何优雅的在一起使用 ？

    前端得包管理你有过几个? 一位用不好包管理器的前端,是一个入门级前端,一个用不好webpack的前端,是一个初级前端 三个包管理器是可以一起用的,只要你够胆大心细,就没任何问题! 在javeScrip ...

  10. Docker--Docker初体验

    echo编辑整理,欢迎转载,转载请声明文章来源.欢迎添加echo微信(微信号:t2421499075)交流学习. 百战不败,依不自称常胜,百败不颓,依能奋力前行.--这才是真正的堪称强大!!! 先来接 ...