VUE学习：Vue CLI-01————webpack常用插件的安装_vue-cli-server 写webpack 插件-优快云博客

本文链接：https://blog.youkuaiyun.com/GAlbinus/article/details/117984394

本文详细介绍Webpack模块打包器的配置方法及常用插件安装步骤，包括css-loader、style-loader等处理css的插件，以及url-loader、file-loader用于处理图片资源的插件，还有将ES6转换为ES5所需的babel-loader等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

提示：
本文为VUE栏目：VUE学习：Vue CLI

前言

本文开始学习webpack模块打包器的配置。

提示：以下是本篇文章正文内容，下面案例可供参考

webpack常用插件安装

# webpack安装
    npm install -D webpack@3.6.0

    #安装一个合适的可以用来处理对应类型的Loader插件。需要安装两个插件来处理css。分别是：css-loader和style-loader
  	#css-loader：解析css文件（和webpack3.6.0相对应的版本是：2.0.2）
    npm install -D css-loader@2.0.2

    #style-loader：把解析的css作为样式输出到DOM层中。（和webpack3.6.0相对应的版本对应的版本是0.23.1）
    npm install -D  style-loader@0.23.1

npm install -D css-loader@2.0.2 style-loader@0.23.1
	#除了需要安装css-loader和style-loader以外，还需要安装一个扩展插件（plugin）
  	#  webpack3.X的版本使用这个命令
    --- npm install -D extract-text-webpack-plugin

 	#  webpack4.x+的版本使用
    --- npm install -D extract-text-webpack-plugin@next
	
  	#  webpack2.x+的版本使用
    --- npm install -D extract-text-webpack-plugin@2.1.2

  	# webpack1.x+的版本使用
    --- npm install -D extract-text-webpack-plugin@1.0.1
    
    # url-loader
    --- npm install -D url-loader@1.1.2
    
    #  file-loader
    --- npm install -D file-loader@3.0.1
    
	npm install -D url-loader@1.1.2 file-loader@3.0.1  
    
    #es6转es5需要三个操作
    npm i -D babel-loader@7.1.5
    npm i -D babel-core@6.26.3
    npm i -D babel-preset-es2015@6.24.1
    npm i -D babel-loader@7.1.5 babel-core@6.26.3 babel-preset-es2015@6.24.1
    
    #-D是
    
    #-S是--save的缩写，意思是保存到项目中，开发环境和运行环境都可以使用
    npm install -S vue@2.6.12