webpack4入门

最新推荐文章于 2020-05-01 13:04:16 发布
最新推荐文章于 2020-05-01 13:04:16 发布
阅读量223 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44132197/article/details/104854874
版权

package.json文件说明；

**{
  "name": "webpack",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.8.7",				//适配高版本js的loader
    "@babel/preset-env": "^7.8.7",			//适配高版本js的loader
    "babel-loader": "^8.0.6",				//适配高版本js的loader
    "clean-webpack-plugin": "^3.0.0",		//清除dist目录的插件
    "css-loader": "^3.4.2",					//让webpack能够识别解析 css 文件
    "file-loader": "^5.1.0",				//图片解析需用
    "html-webpack-plugin": "^3.2.0",		//自动生成html的插件；
    "mini-css-extract-plugin": "^0.9.0",	//分离css的插件，
    "node-sass": "^4.13.1",					
    "sass": "^1.26.3",								
    "sass-loader": "^8.0.2",				//让webpack能够识别解析sass文件
    "style-loader": "^1.1.3",				//style-loader 通过（js）动态的创建style标签的方式，让解析后的css内容，能够作用到页面中；
    "url-loader": "^3.0.0",					//配置图片文件的解析
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3",		//开发服务器
    "webpack-merge": "^4.2.2"				//分离开发环境与发布环境
  },
  "scripts": {
  	//分离前的命令
  	//"dev": "webpack-dev-server --config webpack.config.js",
    //"build": "webpack --config webpack.config.js"
  	//分离后的命令
    "dev": "webpack-dev-server --config config/webpack.dev.js",
    "build": "webpack --config config/webpack.pro.js"
  },
  "dependencies": {
    "jquery": "^3.4.1"
  }
}
**

未分离的webpack.config.js文件

const path = require('path');

//引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

//引入分离css 文件的 模块
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

//导入清除插件,可以在每次打包之前，清除dist目录的内容；
const {CleanWebpackPlugin} = require('clean-webpack-plugin');


//配置webpack 的配置文件，需要将配置的对象导出，给webpack使用；
module.exports = {

    //1. 入口 entry,从那个文件打包
    entry: './src/main.js',

    //2. 出口 output,打包到那里去
    output: {
        path: path.join(__dirname, 'dist'), //打包输出的目录 ( 输出目录必须是个绝对路径 )
        filename: "bundle.js"       //打包生成的文件名；
    },

    //3. 模式mode, development未压缩的， production 压缩的；
    mode: 'development',

    //4. 配置module模块加载规则
    //默认webpack只认识json,javascript, 不认识其他文件，如果希望打包处理其他文件，需要配置对应的loader
    module: {
        rules: [
            //(1) 配置css文件的解析
            {
                //正则：匹配所有以css结尾的文件；
                test: /\.css$/,

                //实际处理顺序：从右往左  <=
                // css-loader 让webpack能够识别解析 css 文件；
                //style-loader 通过（js）动态的创建style标签的方式，让解析后的css内容，能够作用到页面中；
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../',  //公共资源加载的路径
                    },
                },
                    'css-loader']
            },
            //(2)配置sass文件的解析
            {
                test: /\.s[ac]ss$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../',  //公共资源加载的路径
                    },
                },
                    'css-loader', {
                    loader: 'sass-loader',
                    options: {
                        // Prefer `dart-sass`
                        implementation: require('sass'),
                    },
                }]
            },
            //(3)配置图片文件的解析
            {
                test: /\.(png|jpg|git)$/i,
                use: [
                    //url-loader 如果不配置，默认都会将文件转成base64字符串格式；
                    {
                        loader: 'url-loader',
                        //8kb以内，转成base64，节约请求次数；
                        options:{
                            limit: 8 * 1024,
                            //配置文件输出的文件名
                            name: '[name].[ext]',
                            //配置静态资源的引用路径
                            publicPath: '../images/',
                            //配置输出的文件目录，
                            outputPath: "images/"
                        },
                        
                    }
                ]
            },
            //(4)配置 适配高版本js;
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    },

    //5. 配置插件；
    plugins: [
        //自动生成html的插件；
        new HtmlWebpackPlugin({ template: './public/index.html' }),

        //分离css的插件，定义打包好的文件存放的路径和文件名；
        new MiniCssExtractPlugin({filename: 'css/index.css'}),

        //清除dist目录的插件；
        new CleanWebpackPlugin()

    ],

    //6.配置开发服务器；
    devServer:{
        open:true,  //自动打开游览器
        port:3000,
    },
	//7.公共模块提取配置,公共模块大小必须大于30kb才回被独立打包；
    optimization:{
        splitChunks:{
            chunks:"all",       //提取所有文件的共同模块；是webpack内置的一个插件；
        }
    }

}

分离后的配置文件；

webpack.base.js

//公共配置；

const path = require('path');

//引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

//引入分离css 文件的 模块
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

//导入清除插件,可以在每次打包之前，清除dist目录的内容；
const { CleanWebpackPlugin } = require('clean-webpack-plugin');


//配置webpack 的配置文件，需要将配置的对象导出，给webpack使用；
module.exports = {

    //1. 入口 entry,从那个文件打包
    entry: './src/main.js',

    //2. 出口 output,打包到那里去
    output: {
        path: path.join(__dirname, '../dist'), //打包输出的目录 ( 输出目录必须是个绝对路径 )
        filename: "bundle.js"       //打包生成的文件名；
    },


    //4. 配置module模块加载规则
    //默认webpack只认识json,javascript, 不认识其他文件，如果希望打包处理其他文件，需要配置对应的loader
    module: {
        rules: [
            //(1) 配置css文件的解析
            {
                //正则：匹配所有以css结尾的文件；
                test: /\.css$/,

                //实际处理顺序：从右往左  <=
                // css-loader 让webpack能够识别解析 css 文件；
                //style-loader 通过（js）动态的创建style标签的方式，让解析后的css内容，能够作用到页面中；
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../',  //公共资源加载的路径
                    },
                },
                    'css-loader']
            },
            //(2)配置sass文件的解析
            {
                test: /\.s[ac]ss$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../',  //公共资源加载的路径
                    },
                },
                    'css-loader', {
                    loader: 'sass-loader',
                    options: {
                        // Prefer `dart-sass`
                        implementation: require('sass'),
                    },
                }]
            },
            //(3)配置图片文件的解析
            {
                test: /\.(png|jpg|git)$/i,
                use: [
                    //url-loader 如果不配置，默认都会将文件转成base64字符串格式；
                    {
                        loader: 'url-loader',
                        //8kb以内，转成base64，节约请求次数；
                        options: {
                            limit: 8 * 1024,
                            //配置文件输出的文件名
                            name: '[name].[ext]',
                            //配置静态资源的引用路径
                            publicPath: '../images/',
                            //配置输出的文件目录，
                            outputPath: "images/"
                        },

                    }
                ]
            },
            //(4)配置 适配高版本js;
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    },

    //5. 配置插件；
    plugins: [
        //自动生成html的插件；
        new HtmlWebpackPlugin({ template: './public/index.html' }),

        //分离css的插件，定义打包好的文件存放的路径和文件名；
        new MiniCssExtractPlugin({ filename: 'css/index.css' }),

        //清除dist目录的插件；
        new CleanWebpackPlugin()

    ],

	//公共模块提取配置,公共模块大小必须大于30kb才回被独立打包；
    optimization:{
        splitChunks:{
            chunks:"all",       //提取所有文件的共同模块；是webpack内置的一个插件；
        }
    }

}

webpack.dev.js

//开发配置；

//导入公共配置；
const base = require('./webpack.base');


//导入一个用于合并的包
const merge = require('webpack-merge');

//导出开发环境配置
//merge 可以传入多个属性，后面的对象属性回覆盖前面的；

module.exports = merge(base,{

    //3. 模式mode, development未压缩的， production 压缩的；
    mode: 'development',

    //6.配置开发服务器；
    devServer: {
        open: true,  //自动打开游览器
        port: 3000,
    }

})

webpack.pro.js

//生产配置；

//导入公共配置；
const base = require('./webpack.base');


//导入一个用于合并的包
const merge = require('webpack-merge');

//导出生产环境配置
//merge 可以传入多个属性，后面的对象属性回覆盖前面的；
module.exports = merge(base, {
    //3. 模式mode, development未压缩的， production 压缩的；
    mode: 'production',

})

多入口，多出口配置

入口改成对象形式，出口filname改成filname:"js/[name].bundle.js"

 entry: {
        index:'./src/index.js',
        about:'./src/about.js'
    },

    //2. 出口 output,打包到那里去
    output: {
        path: path.join(__dirname, '../dist'), //打包输出的目录 ( 输出目录必须是个绝对路径 )
        filename: "js/[name].bundle.js"       //打包生成的文件名；[name]指代 entry 对象的键名；
    }

配置vue的loader

//安装依赖包
cnpm install vue-loader vue-template-compiler -D

webpack.base.js中引入vue-loader/lib/plugin

//引入 vue 的loader
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module：{
			rules:{
				 //解析vue文件 vue-loader
           			 {
                		test:/\.vue$/,
                		loader:'vue-loader'
           			 }
			}
		}
		
    plugins: [
        //vue 的插件；vue-loader的使用都是需要伴生 VueLoaderPlugin的
        new VueLoaderPlugin()
    ],
且作沧桑酒
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
10.webpack^4.42.1文档学习
l_b_c的博客
05-01 257
1.上一节咋们学习了库的npm发布。
使用webpack开发入门
代码的诱惑
09-15 158
基础应用：nodeJS、npm webpack-good - src - node_modules // 自动生成的目录 - webpack.config.js // webpack配置 - package.json // 依赖等项目配置 使用npm安装webpack以及webpack-cli，我是手动安装了两次（PS：这个地方我觉得应该是一次就可以实现两个的安装，...
4.webpack^4.42.1文档学习
l_b_c的博客
04-21 249
1.上一节我们知道了如何搭建本地服务，将webpack打包后的文件放在本地服务上。但是这似乎还是有点不方便，每次都要先命令行打包然后才能侦听到变化，有没有一种方法使得开启服务器后，更改源文件，后页面实时响应呢？ 这里我们就要学习模块热替换( HMR )以及webpack内置的插件。 首先进行wepack.config.js中的配置 ... const webpack = require('webp...
6.webpack^4.42.1文档学习
l_b_c的博客
04-24 143
思考: 在学习webpack之前， 如果不通过构建工具去构建项目，我们一般是通过scipt或者link标签去引入样式或者js代码，这叫代码逻辑的抽离封装，有了类似webpack这样的构建工具以及AMD、CMD、commonjs、es6之后，咋们管他叫做模块化开发。但是由于这些高级语法目前在浏览器还不完全支持。因此，我们要借助打包构建工具将其转化成内部实现的具有nodejs，requirejs或es...
2.webpack^4.42.1文档学习
l_b_c的博客
04-18 240
1. wepack是如何把控这个资源输出的过程的? 这里官方文档给出了两个比较m抽象的名字：runtime和manifest。 runtime，中文意思是“运行时”，通俗的来讲就是由打包后的模块之间的交互连接关系以及执行逻辑组成的环境。 manifest，中文意思是“货单”，如果在此之前你有使用一下框架(比如uniapp)里面会有manifest.json配置文件。以下是官方原话： 当编译器(c...
1.webpack^4.42.1文档学习
l_b_c的博客
04-17 197
webpack是啥? 说到webpack，一般没有特地地去系统学习的朋友(比如我[手动滑稽])，可能只会联想到loader，proxy，plugin等这些工作中的常用配置选项。其实在前端工程化、模块发之中，它举足轻重。如果能熟练使用它，绝对是能够对于项目开发，以及对于你构建代码的境界提升都有好处。 1.首先我们本地新建一个文件webpack-demo，并通过npm初始化项目，命令如下: npm i...
webpack4 入门最简单的例子介绍
10-18
主要介绍了webpack4 入门最简单的例子介绍，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
webpack4-starter-kit：Webpack 4入门套件
01-31
webpack4-starter-kit 具有webpack-dev-server配置（和Web组件）的Webpack 4。 依存关系 节点v12.16.0（或更高版本） 纱线v1.22（或更高版本）| NPM v6.13.4（或更高版本） 通过CLI安装 安装w4kit-cli npm ...
webpack4简单入门实例
10-18
Webpack 4 简单入门实例 Webpack 是一个流行的模块打包工具，用于处理现代JavaScript应用程序的构建过程。它能够将各种资源（如JavaScript、CSS、图片等）转换、打包，并生成适合部署到生产环境的静态资源。Webpack...
2019年模块化打包工具webpack4教程webpack4入门到进阶webpack视频教程
06-12
Webpack 4 是一款强大的模块打包工具，它在2019年时已经成为了前端开发中的标准配置，尤其对于构建复杂的JavaScript应用来说，是不可或缺的一部分。本教程旨在帮助开发者从零基础到熟练掌握Webpack 4的基本用法和...
webpack 4.x 快速上手使用
qq_21644303的博客
03-13 184
webpack 4.x 快速上手使用 说明：使用软件 vs code，前提需要全局安装node.js 一、 环境安装 打开项目文件，首先安装 webpack npm add webpack webpack-cli -g // 全局安装 npm add webpack webpack-cli -D // 本地安装，快速入手使用 此方式 安装完后会有一个 node_module...
Sequelize 4.42.1 发布，基于 Nodejs 的异步 ORM 框架
weixin_33936401的博客
02-28 118
开发四年只会写业务代码，分布式高并发都不会还做程序员？ Sequelize 4.42.1 发布了，Sequelize ...
9.webpack^4.42.1文档学习
l_b_c的博客
05-01 183
1. 前面学习了webpack的基本操作，那么在open-source兴起的今天我们总是想将自己写的一些轮子分享给别人。但在模块化开发的今天，已不是单纯的通过script引入就能满足了，我们有amd、cmd、commonjs、es6这些模块引入的方式，那么我们怎么同时兼顾这几种模块引入方式呢？ 实际上，我们只要对webpack进行简单的配置就能够实现。 1.1 ...
5.webpack^4.42.1文档学习
l_b_c的博客
04-23 200
今天犹大大直播对于vue3.0进行了一些讲解，看来vue3.0稳定版快要来，看来又要刚起来了。但是万丈高楼从高起，还是要先把基础打牢固。 嗯今天加班回来得比较晚，给明天加个作业。 ...
webpack 插件之Html-Webpack-Plugin
小辣抓
08-13 1748
webpack 插件之Html-Webpack-Plugin1. 为什么我们需要这个插件先来看一个应用场景。 我们自己打算搭建一个网站，这个网站有很多个页面，我们为每个页面创建一大堆的css样式，js脚本，然后尝试用webpack进行打包。于是我们在webpack.config.js里这样写了：const path = require('path'); module.exports = {
webpack4.x入门配置
HansExploration的博客
06-29 735
转自 https://www.jianshu.com/p/6712e4e4b8fe1、首先npm install webpack webpack-cli webpack-dev-server -g (mac电脑用超级管理员的形式进行安装需要前面加上sudo,Windows 电脑不用加sudo)image.png1.1输密文的密码（也就是电脑登陆的密码）安装开始…………image.png1.2安装成...
webpack4打包多个js文件
骑着代码去流浪
07-19 2万+
默认文件目录： 1.多个js文件不合并打包(分别打包) 配置文件./conf/webpack.dev.js const path = require("path"); module.exports = { mode: "development", //打包为开发模式 // 入口配置的对象中，属性为输出的js文件名，属性值为入口文件 entry: { m...
webpack 打包之指定配置文件
麻瓜哇哇哇的博客
03-13 3995
简介 首先，需要重申下，webpack默认的源代码入口就是src/index.js，默认出口是/dist，默认配置文件是webpack.config.js，在实际开发中，存在生产环境和开发环境，而生产环境和开发环境对于配置的需求是不一样的，这时候我们一般就会建三个脚本，webpack.config.js用来放基本配置，webpack.prod.js用来放线上打包的配置，webpack.dev.js...
webpack4升级指南以及从webpack3.x迁移
热门推荐
xhsdnn的专栏
03-05 3万+
&nbsp;&nbsp;&nbsp;&nbsp;几天前webpack发布了新版本v4.0.0，其中做了很多改动，包括0配置以及移除了CommonsChunkPlugin等。由此而来的还有之前webpack3.x的项目如何迁移到新的webpack版本，本文就一个新的vue-cli创建的基于webpack的项目进行迁移。 题外话：不要看0配置是很有噱头，基本是不能满足大部分用户啊的需求，不过加...
webpack优化入门详解
最新发布
05-26
4. 使用缓存 Webpack 默认会将每个文件的 Hash 值作为文件名的一部分，这样可以保证文件内容发生变化时，文件名也会发生变化，从而避免浏览器缓存问题。但是，如果没有改变的文件也每次都重新打包，就会导致打包...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值