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. webpack 4.x 从零开始初始化一个vue项目

    创建目录 项目名称: vue-init app css reset.sass js home index.vue router index.js main.js App.vue views index ...

  2. nginx代理跨域，根据路径参数改变目标服务器地址

    我们都知道nginx是可以做跨域代理的: location ^~ /visited-path/ { proxy_pass http://another-domain/; } 举个例子:假如我们的代理服 ...

  3. Java修炼——容器体系框架总结

    容器有俩大接口Collection接口(无序,不唯一)和Map接口 Collection接口有俩个子接口分别是List和Set. List接口特点是有序但是不唯一,她有三个子接口分别是:ArrayLi ...

  4. UVa-10652 包装木板

    Input: standard inputOutput: standard output Time Limit: 2 seconds The small sawmill in Mission, Bri ...

  5. unity3d 动态添加地面贴图 草地

    TerrainData.splatPrototypes = ]{ new SplatPrototype() { texture=Caodi, //Texture2D的贴图 normalMap=null ...

  6. todo demo

    Todo 功能实现 https://rencoo.github.io/appDemo/todo/index.html ---1.添加事项 ---2.置顶事项 ---3.删除事项 ---4.用时排序 - ...

  7. leetcode -- 寻找两个有序数组的中位数

    题目: 给定两个大小为 m 和 n 的有序数组 nums1 和 nums2. 请你找出这两个有序数组的中位数,并且要求算法的时间复杂度为 O(log(m + n)). 你可以假设 nums1 和 nu ...

  8. 理解Vue中的nextTick

    参考博客:https://www.jianshu.com/p/a7550c0e164f

  9. 对 HTML 语义化的理解

    简述一下你对 HTML 语义化的理解? 用正确的标签做正确的事情. html 语义化让页面的内容结构化,结构更清晰,便于对浏览器.搜索引擎解析; 即使在没有样式 CSS 情况下也以一种文档格式显示,并 ...

  10. 你不会还在用这8个错误的SQL写法吧？

    1.LIMIT 语句 分页查询是最常用的场景之一,但也通常也是最容易出问题的地方.比如对于下面简单的语句,一般 DBA 想到的办法是在 type, name, create_time 字段上加组合索引 ...