webpack配置

webpack配置

文章将会介绍我对webpack的一些基本配置，用来记录我的配置，防止我忘了。

webpack开发模式配置（自己单独做项目已经够了）

1、环境要求配置：

node.js webpack官网建议最新稳定版本

2、起步安装： （注：使用npm安装和cnpm安装是不一样的，会出现一系列报错，所以要么一直用npm安装，要么一直用cnpm安装，这里建议使用npm安装。这篇博客全部为本地安装，因为webpack官网上建议本地安装，这是webpack官网原文：“对于大多数项目，我们建议本地安装。这可以使我们在引入破坏式变更(breaking change)的依赖时，更容易分别升级项目。通常，webpack 通过运行一个或多个 npm scripts，会在本地 node_modules 目录中查找安装的 webpack”）

1、npm init 本地文件运行命令行工具指令，全部回车默认即可，此步骤目的是创建package.json文件，之后安装的loader、plugin等都会在这里显示，有的配置也会在它上面添加。
2、npm install --save-dev webpack webpack-cli 安装webpack的基础包， 目前webpack版本为: 4.44.1，webpack-cli版本为3.3.12，运行命令为webpack
3、npm install --save-dev css-loader style-loader 安装解析css模块的基本配置，css-loader是解析css文件的，style-loader是将css添加到js文件里的，所以配置时位置为css-loader在后
4、npm install --save-dev sass sass-loader 因为我比较喜欢使用sass，所以这里安装解析sass的配置，喜欢less的小伙伴可以自己添加自己的，安装指令类似
5、npm install --save-dev file-loader url-loader 因为webpack对资源进行整合时只能识别js文件和json文件，加了css等一系列loader后会识别css文件，所以这里需要识别文件中的url和图片文件（.jpg|.png|.gif|.svg)的路径并将其关联，安装url-loader必须先安装file-loader，因为url-loader是建立在file-loader上面的。file-loader也会解析其他的文件（MP4、MP3），因为file-loader解析的是文件路径
5、npm install --save-dev html-loader html-webpack-plugin 目前还不能识别html文件，所以加上html-loader，html-webpack-plugin插件是为了整合css、js文件为一个html文件，也可以添加自己编写的html文件
6、npm install --save-dev webpack-dev-server 该插件会将资源在内存中编译打包，不会输出到文件上。运行命令为npx webpack-dev-server
7、npm install --save-dev clean-webpack-plugin 每次运行webpack时都会生成输出文件，如果配置有改变后运行webpack就会有可能产生多余的垃圾文件，这个插件可以清洗这些垃圾文件

3、package.json文件里显示了所有安装模块的版本信息，也可以在这里对自己的项目介绍进行修改

{
  "name": "webpack-dev",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^4.2.2",
    "file-loader": "^6.1.0",
    "html-loader": "^1.3.0",
    "html-webpack-plugin": "^4.4.1",
    "sass": "^1.26.10",
    "sass-loader": "^10.0.2",
    "style-loader"