安科网

Webpack 4x 之路 （ 五 ）

wxcmdn

wxcmdn

2019-06-27

关注 关注

在上一篇中我们在html文件中也引用了一张图片，打包完毕后在浏览器控制台报错：

GET file:///D:/myweb/webpack/webpack_study_demo/webpack_new_test/dist/src/asserts/login1.png net::ERR_FILE_NOT_FOUND
// 意思是图片没找到，下面我们就来学习怎么处理HTML中的图片路径问题了
处理HTML中的图片路径问题

webpack处理资源无往不利，但有个问题总是很苦恼，html中直接使用img标签src加载图片的话，因为没有被依赖，图片将不会被打包。这个loader解决这个问题，图片会被打包，而且路径也处理妥当。额外提供html的include子页面功能。

安装

$ cnpm install html-withimg-loader --save

html-withimg-loader

// webpack.config.js
// 然后在生产环境下增加下列代码
config.module.rules.push(
    {
      test: /\.(htm|html)$/i,
      loader: 'html-withimg-loader'
    }
  )
$ npm run build
// 然后你就会发现上面的那个问题得到了解决，图片成功显示，被转为了base64格式写入了
css进阶： less文件的打包与处理

安装less服务

$ cnpm install less less-loader --save-dev
// webpack.config.js
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin')
var webpack = require('webpack')
const isDev = process.env.NODE_ENV === 'development'
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 分离css
const uglify = require('uglifyjs-webpack-plugin');// js代码压缩插件

const config = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(jpg|png|svg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit:500000,
              name: 'images/[name]-[hash].[ext]'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: 'body'
    }),
    new webpack.HotModuleReplacementPlugin()
  ]
}

if (isDev) {
  // 开发环境下
  config.devServer = {
    host: 'localhost',    // 服务器的IP地址，可以使用IP也可以使用localhost
    compress: true,    // 服务端压缩是否开启
    port: 3000, // 端口
    hot: true,
    open: true
  }

  config.module.rules.push(
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    },
    {                                // 【1】 在开发模式下处理，这里使用的依旧是style-loader
      test: /\.less$/,
      use: ['style-loader', 'css-loader', 'less-loader'] 
    }
  )
} else {
  // 生产模式下
  config.plugins.push(new uglify())
  config.plugins.push(
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  )

  config.module.rules.push(
    {
      test: /\.css$/,
      use: [ MiniCssExtractPlugin.loader, 'css-loader']
    },
    {
      test: /\.less$/,                    //【2】 在生产模式下，这里实现了less的分离
      use: [ MiniCssExtractPlugin.loader, 'css-loader','less-loader']
    }
  )
  config.module.rules.push(
    {
      test: /\.(htm|html)$/i,
      loader: 'html-withimg-loader'
    }
  )
}

module.exports = config;
$ npm run build
// 打包成功
css进阶 : SASS打包与处理

安装

$ cnpm install sass --save-dev

这里需要 在项目目录下用npm安装两个包。node-sass和sass-loader
因为sass-loader依赖于node-sass，所以需要先安装node-sass

$ cnpm install sass-loader --save-dev
$ cnpm install [email protected] --save-dev
// sass.scss
$nav-color: #FFF;
#nav {
  $width: 100%;
  width: $width;
  height:30px;
  background-color: $nav-color;
}
// 与上面处理less是一样的做法
// webpack.config.js
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin')
var webpack = require('webpack')
const isDev = process.env.NODE_ENV === 'development'
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 分离css
const uglify = require('uglifyjs-webpack-plugin');// js代码压缩插件

const config = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(jpg|png|svg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit:500000,
              name: 'images/[name]-[hash].[ext]'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: 'body'
    }),
    new webpack.HotModuleReplacementPlugin()
  ]
}

if (isDev) {
  // 开发环境下
  config.devServer = {
    host: 'localhost',    // 服务器的IP地址，可以使用IP也可以使用localhost
    compress: true,    // 服务端压缩是否开启
    port: 3000, // 端口
    hot: true,
    open: true
  }

  config.module.rules.push(
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    },
    {
      test: /\.less$/,
      use: ['style-loader', 'css-loader', 'less-loader'] 
    },
    {
      test: /\.scss$/,             // 【1】 
      use: ['style-loader', 'css-loader', 'sass-loader']
    }
  )
} else {
  // 生产模式下
  config.plugins.push(new uglify())
  config.plugins.push(
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  )

  config.module.rules.push(
    {
      test: /\.css$/,
      use: [ MiniCssExtractPlugin.loader, 'css-loader']
    },
    {
      test: /\.less$/,
      use: [ MiniCssExtractPlugin.loader, 'css-loader','less-loader']
    },
    {
      test: /\.scss$/,            // 【2】
      use: [ MiniCssExtractPlugin.loader, 'css-loader','sass-loader']
    }
  )
  config.module.rules.push(
    {
      test: /\.(htm|html)$/i,
      loader: 'html-withimg-loader'
    }
  )
}

module.exports = config;
// $ npm run build
// 没问题
处理css前缀

CSS3已经成了前端的必会技能，但是你一定为那些属性需要加前缀,以满足不同浏览器的兼容，这节课我们就学习一下如何通过postcss-loader给css3属性自动添加前缀。

为了浏览器的兼容性，有时候我们必须加入-webkit,-ms,-o,-moz这些前缀。目的就是让我们写的页面在每个浏览器中都可以顺利运行。

postcss就是一个css的处理器，它有一项非常好的功能就是可以为css添加前缀，这将会使得我们的开发变得非常快速

安装

$  cnpm install --save-dev postcss-loader autoprefixer
// 以及其他插件
$  cnpm install postcss-import --save-dev
$  cnpm install postcss-cssnext --save-dev //一个模块化的缩小器，建立在PostCSS生态系统之上。看到的代码压缩间距就是这个插件的效果
// 样式编写，在每一个样式文件中都加这个
div{
    display: flex;
}
// webpack.config.js
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin')
var webpack = require('webpack')
const isDev = process.env.NODE_ENV === 'development'
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 分离css
const uglify = require('uglifyjs-webpack-plugin');// js代码压缩插件

const config = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(jpg|png|svg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 500000,
              name: 'images/[name]-[hash].[ext]'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: 'body'
    }),
    new webpack.HotModuleReplacementPlugin()
  ]
}

if (isDev) {
  // 开发环境下
  config.devServer = {
    host: 'localhost',    // 服务器的IP地址，可以使用IP也可以使用localhost
    compress: true,    // 服务端压缩是否开启
    port: 3000, // 端口
    hot: true,
    open: true
  }

  config.module.rules.push(
    {
      test: /\.css$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            importLoaders: 1
          }
        },
        {
          loader: 'postcss-loader',            // 【1】 加入了postcss-loader
          options: {
            ident: 'postcss',
            plugins: (loader) => [                // 【2】这里使用了一些插件
              require('postcss-import')({ root: loader.resourcePath }),
              require('postcss-cssnext')(),
              require('autoprefixer')(),
              require('cssnano')()
            ]
          }
        }

      ]
    },
    {
      test: /\.less$/,
      use: [
        {
          loader: 'style-loader'
        },
        {
          loader: 'css-loader',
          options: {
            importLoaders: 1
          }
        },
        {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: (loader) => [
              require('postcss-import')({ root: loader.resourcePath }),
              require('postcss-cssnext')(),
              require('autoprefixer')(),
              require('cssnano')()
            ]
          }
        },
        {
          loader: 'less-loader' // 如果less文件中使用了@import 引入了别的less文件，这里可以不用设置importLoaders
        }
      ]
    },
    {
      test: /\.scss$/,
      use: [
        {
          loader: 'style-loader'
        },
        {
          loader: 'css-loader',
          options: {
            importLoaders: 1
          }
        },
        {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: (loader) => [
              require('postcss-import')({ root: loader.resourcePath }),
              require('postcss-cssnext')(),
              require('autoprefixer')(),
              require('cssnano')()
            ]
          }
        },
        {
          loader: 'sass-loader'
        }
      ]
    }
  )
} else {
  // 生产模式下
  config.plugins.push(new uglify())
  config.plugins.push(
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  )

  config.module.rules.push(
    {
      test: /\.css$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        {
          loader: 'postcss-loader',            //【3】在生产模式下的修改，这里要注意的是位置的放置
          options: {
            ident: 'postcss',
            plugins: (loader) => [
              require('postcss-import')({ root: loader.resourcePath }),
              require('postcss-cssnext')(),
              require('autoprefixer')(),
              require('cssnano')()
            ]
          }
        }
      ]
    },
    {
      test: /\.less$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: (loader) => [
              require('postcss-import')({ root: loader.resourcePath }),
              require('postcss-cssnext')(),
              require('autoprefixer')(),
              require('cssnano')()
            ]
          }
        },
        'less-loader'
      ]
    },
    {
      test: /\.scss$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: (loader) => [
              require('postcss-import')({ root: loader.resourcePath }),
              require('postcss-cssnext')(),
              require('autoprefixer')(),
              require('cssnano')()
            ]
          }
        },
        'sass-loader'
      ]
    }
  )
  config.module.rules.push(
    {
      test: /\.(htm|html)$/i,
      loader: 'html-withimg-loader'
    }
  )
}

module.exports = config;

// postcss使用
// 将`postcss-loader`添加到 `webpack.config.js` 中，您可以单独的使用它，也可以是与 `css-loader` 一起使用。在css-loader和style-loader之后使用它,但是在其他预处理器加载器(如less-loader)之前使用它
$ npm run dev
// 执行后发现前缀添加完毕,并且代码做了一定的压缩
使用babel

babel可以干什么呢？

  1. 可以让你使用使用下一代javascript代码（ES6\ES7）,即使这些标准目前还没有被所有浏览器所支持
  2. 使用基于javascript进行了扩展的语言，比如React的jsx;

安装

$ cnpm install babel-core babel-loader babel-preset-env --save-dev
// 再目录下建立.babelrc文件
{
    "presets":["env"]
}
// webpack.config.js
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin')
var webpack = require('webpack')
const isDev = process.env.NODE_ENV === 'development'
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 分离css
const uglify = require('uglifyjs-webpack-plugin');// js代码压缩插件
const glob = require('glob');
const PurifyCSSPlugin = require("purifycss-webpack");


const config = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(jpg|png|svg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 500000,
              name: 'images/[name]-[hash].[ext]'
            }
          }
        ]
      },
      {
        test: /\.js$/,            // 【1】 更改这里
        use: [
          'babel-loader'
        ],
        exclude: /(node_modules|bower_components)/  // 优化处理加快速度
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: 'body'
    }),
    new webpack.HotModuleReplacementPlugin(),
    new PurifyCSSPlugin({
      // Give paths to parse for rules. These should be absolute!
      paths: glob.sync(path.join(__dirname, 'src/*.html')),
    })
  ]
}

if (isDev) {
  // 开发环境下
  config.devServer = {
    host: 'localhost',    // 服务器的IP地址，可以使用IP也可以使用localhost
    compress: true,    // 服务端压缩是否开启
    port: 3000, // 端口
    hot: true,
    open: true
  }

  config.module.rules.push(
    {
      test: /\.css$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            importLoaders: 1
          }
        },
        {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: (loader) => [
              require('postcss-import')({ root: loader.resourcePath }),
              require('postcss-cssnext')(),
              require('autoprefixer')(),
              require('cssnano')()
            ]
          }
        }

      ]
    },
    {
      test: /\.less$/,
      use: [
        {
          loader: 'style-loader'
        },
        {
          loader: 'css-loader',
          options: {
            importLoaders: 1
          }
        },
        {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: (loader) => [
              require('postcss-import')({ root: loader.resourcePath }),
              require('postcss-cssnext')(),
              require('autoprefixer')(),
              require('cssnano')()
            ]
          }
        },
        {
          loader: 'less-loader' // 如果less文件中使用了@import 引入了别的less文件，这里可以不用设置importLoaders
        }
      ]
    },
    {
      test: /\.scss$/,
      use: [
        {
          loader: 'style-loader'
        },
        {
          loader: 'css-loader',
          options: {
            importLoaders: 1
          }
        },
        {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: (loader) => [
              require('postcss-import')({ root: loader.resourcePath }),
              require('postcss-cssnext')(),
              require('autoprefixer')(),
              require('cssnano')()
            ]
          }
        },
        {
          loader: 'sass-loader'
        }
      ]
    }
  )
} else {
  // 生产模式下
  config.plugins.push(new uglify())
  config.plugins.push(
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  )

  config.module.rules.push(
    {
      test: /\.css$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: (loader) => [
              require('postcss-import')({ root: loader.resourcePath }),
              require('postcss-cssnext')(),
              require('autoprefixer')(),
              require('cssnano')()
            ]
          }
        }
      ]
    },
    {
      test: /\.less$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: (loader) => [
              require('postcss-import')({ root: loader.resourcePath }),
              require('postcss-cssnext')(),
              require('autoprefixer')(),
              require('cssnano')()
            ]
          }
        },
        'less-loader'
      ]
    },
    {
      test: /\.scss$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: (loader) => [
              require('postcss-import')({ root: loader.resourcePath }),
              require('postcss-cssnext')(),
              require('autoprefixer')(),
              require('cssnano')()
            ]
          }
        },
        'sass-loader'
      ]
    }
  )
  config.module.rules.push(
    {
      test: /\.(htm|html)$/i,
      loader: 'html-withimg-loader'
    }
  )
}

module.exports = config;

测试

// index.js
import './styles/reset.css';
import './styles/index.css';
import './styles/base.less';
import './styles/sass.scss';

{
    let title = 'hello';
    document.getElementById('title').innerHTML = title;
}

// 测试发现没问题
感谢您的支持！！

webpack html代码 config

wxcmdn

wxcmdn

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

webpack 之压缩js代码 和html文件

2.压缩html文件，html文件不需要处理兼容问题，压缩文件只需要在plugins中的HtmlWebpackPlugin中配置minify即可

gufudhn 2020-06-06

为 Vue 的惰性加载加一个进度条

通常用 Vue.js 编写单页应用时，当加载页面时，所有必需的资源都会被一起加载。在处理大文件时，这可能会导致用户体验不佳。借助 Webpack，可以用 import() 函数而不是 import 关键字在 Vue.js 中按需加载页面。Vue.js 中

gloria0 2020-10-26

ts项目初始化

npm i typescript npm i webpack webpack-cli webpack-dev-server -D. "test": "echo \"Error: no test specified\&

yqoxygen 2020-06-02

带你使用webpack快速构建web项目的方法

使用webpack构建web项目以及热部署插件的使用，按以下步骤，能帮助你快速构建和理解~详细学习还得靠官方文档！你得先安装了Node.js此处不赘述。使用此插件我们将会自动在打包的时候创建index.html，且无须关心bundle.js的文件路径。打包

不知道该写啥QAQ 2020-11-12

Webpack的Loader和Plugin的区别

用于对模块源码的转换，loader描述了webpack如何处理非javascript模块，并且在buld中引入这些依赖。loader可以将文件从不同的语言转换为JavaScript，或者将内联图像转换为data URL。module.rules可以指定多个

webfullStack 2020-11-09

vscode 调试 node.js的方法步骤

作为前端工程师经常打交道的开发工具无非 IDE 编辑器 和 Chrome，在 Chrome 中调试是非常方便的，直接在 开发者工具的 source 栏打断点就可以了。那么，如果遇到需要写 node 相关的代码，比如 webpack 配置项，应该怎么调试来实

Yvettre 2020-09-15

如何用5分钟开发一个 Webpack Loader？

今天分享的内容是如何开发一个简单的Webpack Loader，希望通过这个过程能够让你 Get 到 Webpack Loader 的工作原理与机制。这里我的需求是开发一个可以加载 markdown 文件的加载器，以便可以在代码中直接导入 md 文件。我们

想做大牛的蜗牛 2020-10-30

详解webpack的文件监听实现(热更新)

文件监听是在源码发生变化时，自动重新构建出新的输出文件。"test": "echo \"Error: no test specified\" && exit 1",

gaojie0 2020-09-11

Runoob-ES6：ES6 环境搭建

目前各大浏览器基本上都支持 ES6 的新特性，其中 Chrome 和 Firefox 浏览器对 ES6 新特性最友好，IE7~11 基本不支持 ES6。Node.js 是运行在服务端的 JavaScript，它对 ES6 的支持度更高。如果你还不了解 No

SelinaChan 2020-08-14

配置webpack

在全局安装webpack: npm install webpack -g. 在项目的根目录创建一个 webpack.config.js. // entry: 打包的入口文件，一个字符串或者一个对象。// output: 配置打包的结果，一个对象。// f

不知道该写啥QAQ 2020-08-09

vue—cli脚手架

使用npm全局安装webpack，打开命令行工具输入：npm install webpack -g或者，安装完成之后输入 webpack -v，如下图，如果出现相应的版本号，则说明安装成功。注意：webpack 4.X 开始，需要安装 webpack-cl

gloria0 2020-08-09

Webpack 原理浅析

Webpack迭代到4.x版本后，其源码已经十分庞大，对各种开发场景进行了高度抽象，阅读成本也愈发昂贵。但是为了了解其内部的工作原理，让我们尝试从一个最简单的 webpack 配置入手，从工具设计者的角度开发一款低配版的Webpack。假设某一天，我们接到

不知道该写啥QAQ 2020-08-02

第一个Vue页面

安装完后，打开cmd命令行界面。安装yarn(fackbook依赖管理工具与Npm功能一样，推荐使用！！！--- 是否安装vue路由 -->. --- 是否启动ESLint代码检测 -->. --- 是否设置单元测试 -->. --- 是

hline 2020-07-29

webpack之常用plugin的配置和使用

html-webpack-plugin插件默认会创建一个HTML模板，并自动引入打包生成的几个主要的chunk包

SelinaChan 2020-07-28

【webpack】webpack打包之后调试源码

注释掉的UglifyJsPlugin用于js打包、压缩、混淆

yqoxygen 2020-07-28

ABAP, UI5和webpack的处理入口

如果一个UI5应用配置到portal的Fiori Launchpad里,那么应用的入口是Component.js. 另一种方式不需要launchpad，只需要在一个standalone的html里自己新建一个component的运行环境:. 那么只需要关注

wangdianyong 2020-07-23

ABAP, Maven, CF App和Webpack的build

命令行mvn clean install后，生成的jar文件默认位于target folder下。在包含了这个yaml文件的folder里使用cf push，因为里面指定了java_buildpack作为buildpack，应用upload到cloud f

webpackvuees 2020-07-23

vue.js 安装

由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。This will install Vue 2.x version of the

yqoxygen 2020-07-20

基于vue-cli搭建vue项目开发环境

vue-cli是vue的脚手架工具，用于快速搭建vue项目。让开发者只关心项目本身，而不去关注项目的开发环境。在安装vue-cli之前，我们先安装webpack，在命令行工具输入下面代码。，这里就默认你安装node.js. webpack-simple

不知道该写啥QAQ 2020-07-18

06、Webpack使用loader配置css文件、图片文件、

loader 让 webpack 能够去处理那些非 JavaScript 文件。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。本质上，webpack loader

waterv 2020-07-18
wxcmdn

wxcmdn

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号