上一篇：webpack大全---------(基础配置篇)----2.webpack实例二

webpack实例三：讲述代码效验模块eslint、引入第三方模块的处理、图片的打包处理。

第一步：安装配置。

     yarn add webpack webpack-cli -Dyarn add webpack-dev-server  -D   //安装热服务，后面会讲解yarn add style-loader css-loader less-loader  less  -D //处理css less需要的loaderyarn add html-webpack-plugin  -D  //打包生成html文件需要的第三方插件。yarn add mini-css-extract-plugin  -D //进行css代码抽离需要的插件,内置有loader 。yarn add optimize-css-assets-webpack-plugin -D  //进行css代码的压缩优化yarn  add uglifyjs-webpack-plugin  -D  //进行css代码的优化和压缩的时候会，就是在production模式下也会接触js代码的压缩,采用此插件可以阻止此发生。yarn add html-withimg-loader  -D 处理html文件的使用img标签引入图片的压缩图片的模块。yarn add file-loader  -D 处理图片的loader （无参数）yarn add url-loader -D 处理图片的loader  （有参数版）yarn add  eslint  -D代码效验的核心模块yarn add eslint-loader  -D代码效验的loader 依赖于eslintyarn add babel-loader @babel/core @babel/preset-env  -D //用来解析js语法。yarn add @babel/polyfill  -D //解析一些新的es7特性的要，需要在使用该特性的js文件下引用。yarn add  expose-loader -D  //安装强制暴露模块,强制暴露第三方模块用。

并且创建一个根目录下创建一个src目录，在里面创建几个文件：index.html、index.css、index.js、
、.eslintrc.json、a.js.(到eslint官网去下载需要效验的配置json包)
并且在根目录下创建webpack.config.js配置文件：
pack.json文件中写入如下内容：

     "scripts": {"build": "webpack --config webpack.config.js",      //表示默认的情况下 npm run build则启动这个命令。"dev": "webpack-dev-server"         //启动热服务的时候 npm run dev},

第二步1：写入内容（校验代码部分）。

a.js

 require('@babel/polyfill');   //需要引入这个包class B{}
function *gen(params){yield  1;
}
console.log(gen().next());'aaa'.includes('a');      //要用@babel/polyfill 这个包用来转换这个语法

index.js

  const fn = ()=>{console.log("我是fn")
};
fn();//@log属于类的装饰器
@log
class A{  //相当于在A这个类里面加入一个实例属性 a =1  ES7的语法a = 1;
}
let a = new A();
console.log(a.a);function log(A) {console.log(A)
}

webpack.config.js

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let MiniCSSExtractPlugin = require('mini-css-extract-plugin');
let webpack = require('webpack');module.exports = {devServer: {port:3000,progress:true,contentBase:'./dist' ,compress:true,},mode: "development",entry:'./src/index.js',output:{filename: "bundle.js",path: path.resolve(__dirname,'dist'),//publicPath: "https://www.justyunmeng.com"  给所有的打包后的src加上这个访问前缀},plugins: [new HtmlWebpackPlugin({template: './src/index.html',filename: 'index.html',}),],module: { //模块rules: [{//校验js语法 用eslint包       //需要安装eslint 和 eslint-loadertest:/\.js/,use:{loader: "eslint-loader",options:{enforce:'pre'   //因为loader是从下到上执行 从右到左执行的  使用pre可以强制先执行这个文件 post表示最后执行}}},//转换js语法{test:/\.js$/,     // 安装的时候需要安装 babel-loader  @babel/core  @babel/preset-envuse: {loader: "babel-loader",options: {presets: ["@babel/preset-env"],        //es6->es5plugins:[   //加入babel的插件["@babel/plugin-proposal-decorators", { "legacy": true }],         //当类使用修饰器的时候使用["@babel/plugin-proposal-class-properties", { "loose" : true }],  //当使用类的时候"@babel/plugin-transform-runtime"                                 //进行generate语法的转换]//当使用一些es7的函数的时候要在相对应的js文件引入 require(@babel/polyfill)}},include:path.resolve(__dirname,'src'),exclude:/node_module/},{test:/\.css$/,use:[MinCssExtractPlugin.loader,'css-loader','postcss-loader']},{test:/\.less$/,use:[MinCssExtractPlugin.loader,'css-loader','postcss-loader','less-loader']}]}
};

效验成功截图：

第二部：写入内容（引入第三方模块处理部分和图片处理）

文件：index.css、index.js、index.html、webpack.config.js、图片Remix.jpg.

index.js

   jquery(外部模块)的引入方法/import  $ from 'jquery'; //window对象拿不到$;
//三种解决方法
//1）
import $ from 'expose-loader?$!jquery';    //这种方法可以直接子拿到//2）   //将expose-loader写到webpack配置文件中
import $ from 'jquery';
console.log(window.$);//3) //如何需要在每个模块中注入$符号 使用webpack分配的插件,不需要配置expose-loader
import  $ from 'jquery';
console.log($);//4) 外部引用了cdn模块情况下，又想这里写下引用$符号,但是打包的时候会把引用的又打包，需要在webpack配置文件中忽略掉。
import $ from 'jquery';   //写在这里为心里安慰
console.log($);   //直接可以拿到这个$，因为外部引用了cdn//JS中图片的处理//
//webpack中打包我们的图片
//1）在js中创建图片来引入
//file-loader默认会在内部生成一张图片到build目录下
//把生成的图片的名字返回回来import './index.less';
import  './index.css';
import remix from './Remix.jpg';
console.log(remix);
let image = new Image();
image.src = remix;
document.body.appendChild(image);//2）css中进行引入背景图片(css-loader的作用)//3)直接html进行背景图片的引入(使用到html-withimg-plugin模块);

index.css

 body{background-color: red;}#div1{width: 500px;height: 500px;background-image:url("./Remix.jpg");background-size: 100% 100%;-moz-background-size: 100% 100%;}#div1 img{width: 500px;height: 500px;}img{width: 200px;height: 200px;}

index.html

 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<style>body{  /*优先级比less和css的高*/background-color: yellow;}
</style>
<body><div id="div1"></div>
<img src="./Remix.jpg" alt="" style="width: 100px;height: 100px"/>
</body>
</html>

webpack.config.js

    let path = require('path');let HtmlWebpackPlugin = require('html-webpack-plugin');let MinCssExtractPlugin = require('mini-css-extract-plugin');let OptimizeCss = require('optimize-css-assets-webpack-plugin');let UglifyJsPlugin = require('uglifyjs-webpack-plugin');let webpack = require('webpack');module.exports = {devServer: {port:3000,progress:true,contentBase:'./dist' ,compress:true,},optimization: {minimizer: [new  UglifyJsPlugin({cache: true,parallel: true,sourceMap: true}),new OptimizeCss()]},mode: "development",entry:'./src/index.js',output:{filename: "bundle.js",path: path.resolve(__dirname,'dist'),//publicPath: "https://www.justyunmeng.com"  给所有的打包后的src加上这个访问前缀},plugins: [new HtmlWebpackPlugin({template: './src/index.html',filename: 'index.html',}),new MinCssExtractPlugin({filename:'css/main.css'}),/* new webpack.ProvidePlugin({     //在每个模块中注入jquery$:'jquery'})*/],//忽略打包externals: {jquery:'$'},module: { //模块rules: [//当使用第三方外部的包的时候/*{test:require.resolve('jquery'),use:'expose-loader?$'},*/{test:/\.html$/,       //当加载html页面的图片的时候使用这个loader进行图片的压缩use:'html-withimg-loader'},//处理图片的url-loader{test:/\.(png|jpg|gif)$/,   //校验的图片的类型//use:"file-loader",    //也可以用这个，但是url-loader可以穿参数use:{loader: "url-loader",     //用这个可以设置一些东西options:{limit:1,              //限制不进行base64的转换  如果要超过200k就行了转换成base64的话 可以这么写 limit：200*1024outputPath:'img/',    //产出的路径(打包后的文件夹)//publicPath:'https://justyunmeng.com/'  //只给图片的加上这个前缀}}},//转换js语法{test:/\.js$/,     // 安装的时候需要安装 babel-loader  @babel/core  @babel/preset-envuse: {loader: "babel-loader",options: {presets: ["@babel/preset-env"],        //es6->es5plugins:[   //加入babel的插件["@babel/plugin-proposal-decorators", { "legacy": true }],         //当类使用修饰器的时候使用["@babel/plugin-proposal-class-properties", { "loose" : true }],  //当使用类的时候"@babel/plugin-transform-runtime"                                 //进行generate语法的转换]//当使用一些es7的函数的时候要在相对应的js文件引入 require(@babel/polyfill)}},include:path.resolve(__dirname,'src'),exclude:/node_module/},{test:/\.css$/,use:[MinCssExtractPlugin.loader,'css-loader','postcss-loader']},{test:/\.less$/,use:[MinCssExtractPlugin.loader,'css-loader','postcss-loader','less-loader']}]}
};

效果图：
打包成功：
浏览器预览：

webpack大全---------(基础配置篇)----4.webpack实例三相关推荐

Vue2，Webpack的基础配置以及使用脚手架创建工程
Webpack的基础配置以及使用脚手架创建工程文章目录 Webpack的基础配置以及使用脚手架创建工程一.模块化二.webpack 1.在项目中安装webpack 2.完成更加复杂的打包工作(c ...
apache camel 相关配置_Web基础配置篇（二）: Maven配置及使用
Web基础配置篇(二): Maven配置及使用一.概述 Maven是一个软件开发管理工具,主要管理工作是:依赖管理,项目一键构建. 以前用过ant,很不方便,maven比较简单易用. 然后后面又来了 ...
mysql基本sql语句大全(基础用语篇)
mysql基本sql语句大全(基础用语篇). 1.说明:创建数据库 CREATE DATABASE database-name 2.说明:删除数据库 drop database dbname 3.说明 ...
Web基础配置篇（十一）: Zookeeper的安装配置及使用
Web基础配置篇(十一): Zookeeper的安装配置及使用一.概述 ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop ...
redis cli 删除key 模糊_Web基础配置篇（六）: Redis的安装配置及基本操作
Web基础配置篇(六): Redis的安装配置及基本操作一.概述 Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的A ...
Web基础配置篇（十二）: Elasticsearch的安装配置及入门使用
Web基础配置篇(十二): Elasticsearch的安装配置及入门使用一.概述 ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RE ...
Web基础配置篇（七）: Svn与Git的基本使用
Web基础配置篇(七): Svn与Git的基本使用一.概述 svn和git分别是目前使用最广泛的两种版本控制器. SVN(Subversion)是集中式管理的版本控制器,而Git是分布式管理的版本控 ...
Web基础配置篇（十四）: Kafka单机、集群的安装配置及使用
Web基础配置篇(十四): Kafka单机.集群的安装配置及使用一.概述 Apache Kafka是一个分布式发布 - 订阅消息系统和一个强大的队列,可以处理大量的数据,并使您能够将消息从一个端点传 ...
Web基础配置篇（二）: Maven配置及使用
Web基础配置篇(二): Maven配置及使用一.概述 Maven是一个软件开发管理工具,主要管理工作是:依赖管理,项目一键构建. 以前用过ant,很不方便,maven比较简单易用. 然后后面又来了 ...

webpack大全---------(基础配置篇)----4.webpack实例三

webpack实例三：讲述代码效验模块eslint、引入第三方模块的处理、图片的打包处理。

第一步：安装配置。

第二步1：写入内容（校验代码部分）。

第二部：写入内容（引入第三方模块处理部分和图片处理）

webpack大全---------(基础配置篇)----4.webpack实例三相关推荐

最新文章

热门文章