webpack学习（一）

codecraft 发布于2019-08-23 17:55 / 823人阅读

摘要：四用于对模块的源代码进行转换。对于图片等都不能识别，所有需要引入对应的对对应格式的文件进行转换以便来识别。支持链式调用，调用顺序由下到上，由右到左五插件目的在于解决无法实现的其他事。

一.entry

entry是webpack打包的入口配置，entry对应的值可以是字符串，数组，对象；单入口可以使用字符串、数组、对象，多入口配置则必须使用对象的方式

二.output

output是webpack打包的出口配置，可以指定文件输出的路径path和文件名filename；多入口起点的时候，出口文件名配置需要以占位符来确保每个文件具有唯一的名称，eg：filename="[name].js"

三.mode

模式配置告知webpack使用相应的配置优化，支持development，production；webpack打包的时候可以使用webpack --mode=production进行参数传递。

四.loader

loader 用于对模块的源代码进行转换。webpack默认只支持js，json文件格式。对于css、es6、图片、vue、jsx等webpack都不能识别，所有需要引入对应的loader对对应格式的文件进行转换以便webpack来识别。loader支持链式调用，调用顺序由下到上，由右到左

五.plugins

插件目的在于解决 loader 无法实现的其他事。

六.webpack项目搭建（vue）

1）npm i webpack webpack-cli -D安装webpack依赖。
安装完了可以对js文件进行解析，但是却不能解析es6，要解析es6就需要借助babel。

2）npm babel-loader @babel/core @babel/preset-env -D安装babel对应的依赖。
在目录下创建.babelrc文件，配置preset
{
    "presets": [
        "@babel/preset-env"
    ]
}

配置babel-loader
module: {
    rules: [
        {
            test: /.js$/,
            use: "babel-loader"
        }
    ]
}

3)npm i css-loader style-loader less less-loader -D 安装css对应loader
{
    test：/.css$/,
    use: [
        "style-loader",
        "css-loader"
    ]
},
{
    test: /.less$/,
    use: [
        "style-loader",
        "css-loader",
        "less-loader",
    ]
} 
这个方式css和js是编译打包到一个文件里面，css样式以style的方式插入head中，
但是大多数情况我们是希望js和css分别独立打包，这时我们就需要引入插件
mini-css-extract-plugin把css样式抽离出来。

npm i mini-css-extract-plugin -D安装插件。

在webpack.config.js引入

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

loader就不能使用style-loader需引用MiniCssExtractPlugin.loader

plugins: [
   new MiniCssExtractPlugin({
       filename: "[name].css"
    })
]

npm i optimize-css-assets-webpack-plugin -D引入css压缩插件

const OptimizeCss = require("optimize-css-assets-webpack-plugin");

配置css压缩plugins
new OptimizeCss({
  assetNameRegExp: /.css$/g,
  cssProcessor: require("cssnano"),
}),

4)npm i vue-loader vue-template-compiler -D安装vue依赖loader
{
    test: /.vue$/,
    use: "vue-loader"
}

引入vue-loader plugin：

const VueLoaderPlugin = require("vue-loader/lib/plugin");
new VueLoaderPlugin(),

5)npm i html-webpack-plugin -D 安装html的插件

const HtmlWebpackPlugin = require("html-webpack-plugin");

new HtmlWebpackPlugin({
    template: "./src/index.html",
    filename: "index.html", // 打包之后的html
    chunks: ["app"], // 依赖的文件
    inject: true,
    minify: {
        html5: true,
        removeAttributeQuotes: true,
        collapseWhitespace: true,
    }
})

6）热更新

GPU云服务器云服务器学习笔记一深度学习一深度学习一篇深度学习一天

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

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

webpack入门学习手记（一）

摘要：争取早日能完全抛弃掉中文文档，最终可以翻译英文文档，输出英文文档。待续相关文章入门学习手记一入门学习手记二入门学习手记三入门学习手记四本人微信公众号：前端修炼之路，欢迎关注。 showImg(https://segmentfault.com/img/bVbk0kO?w=1150&h=599); 之前用过gulp、grunt，但是一直没有学习过webpack。这两天刚好有时间，学习了下...

mengera88 2019-08-23 14:01 评论0 收藏0
webpack 学习笔记（一）

摘要：引言最近在学习，发现好多知识点，之前一点都没有接触过，如等等。使用本地安装，会存于文件夹内与属性内，更方便项目文件迁移以及协同开发等情况。引言最近在学习webpack，发现好多知识点，之前一点都没有接触过，如babel、core-js、browserslist等等。以前习惯了使用cli构建项目，很多东西不用考虑，拿来就用，这样的码农是不会有能力提升的，必须了解更多的知识点，才能成为...

zhangwang 2019-08-26 10:36 评论0 收藏0
我的webpack学习笔记（一）

摘要：前言在上一篇文章中我介绍了学习前的准备工作，下面开始的学习。目标一般我们接触到的关于的文章，都是以解读官方文档为主，而且是针对单页面项目的应用。我先在假设要做一个多页面应用，该如何去通过打包。前言在上一篇文章中我介绍了学习webpack前的准备工作，下面开始webpack的学习。 *创建webpack-demo文件夹 $ mkdir webpack-demo $ cd webpac...

wh469012917 2019-08-21 11:48 评论0 收藏0
我的webpack学习笔记（一）

摘要：前言在上一篇文章中我介绍了学习前的准备工作，下面开始的学习。目标一般我们接触到的关于的文章，都是以解读官方文档为主，而且是针对单页面项目的应用。我先在假设要做一个多页面应用，该如何去通过打包。前言在上一篇文章中我介绍了学习webpack前的准备工作，下面开始webpack的学习。 *创建webpack-demo文件夹 $ mkdir webpack-demo $ cd webpac...

CrazyCodes 2019-08-29 12:54 评论0 收藏0
webpack入门学习手记（二）

摘要：例如现在的入门学习手记系列。收到粉丝留言和打赏的喜悦。安装上一篇入门学习手记一，主要是介绍了的核心概念，是整个学习过程的基础知识。新生成的类似如下入门学习手记因为生成的内容过多，我直接省略掉了。 showImg(https://segmentfault.com/img/bVbk5Nd?w=1150&h=599); 本人微信公众号：前端修炼之路，欢迎关注。最近开始想要维护一个个人的公众...

Joyven 2019-08-23 14:05 评论0 收藏0