webpack基本配置学习

webpack安装

自己简单的使用了下，先npm init 初始化了一下环境，然后安装webpack

npm init -y 
npm install webpack webpack-cli --save-dev

npm init -y中-y既是yes的意思，个人感觉相当于默认配置，直接生成package.json文件。

简单的webpack配置

在package.json的同级目录下创建一个webpack.config.js文件，写入了一下内容：

'use strict'
const path = require('path')
module.exports = {
	entry: {//入口
		index: './src/index.js',
	},
	output: {//出口
		path: path.join(__dirname,'dist'),
		filename: 'index.js'
	},
	module: {//loader
		rules: [
			
		]
	},
	plugins: [],//插件
	mode:'production'//环境
}

entry代表打包入口，output需要指定输出地址及打包出来的文件名，loader让webpack能够去处理那些非JavaScript文件(webpack 自身只理解 JavaScript)，plugins代表插件入口，所有插件都在这里配置，mode指开发环境。
然后在package.json文件下的script节点添加一项配置 “build”: “webpack”，再运行 npm run build 就可以方便地打包了。

{
  "name": "csdn",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
	"build": "webpack"
  },

loader

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
解析ES6,需要用到babel-loader。

npm i @babel/core @babel/preset-env babel-loader -D
//再在根目录创建 ``.babelrc` 文件，增加以下内容
{
    "presets": [
        "@babel/preset-env",
    ]
}

接着在webpack.config.js文件module中添加

module: {
	rules: [
		{
			test: /.js$/,
			use: 'babel-loader'
		},
	 ]
}

rules集合的每个元素都是一个文件类型的配置信息：test是一个正则，用来匹配文件后缀名；use表示此loader名称。
可以使用 loader 告诉 webpack 加载 CSS 文件，或者将 TypeScript 转为 JavaScript。为此，首先安装相对应的 loader：

npm install --save-dev css-loader
npm install --save-dev ts-loader
//webpack.config.js
module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};

webpack加载图片

npm i url-loader -D
//webpack.config.js
{
    test: /.(jpg|png|gif|jpeg)$/,
    use: [{
        loader:'url-loader',
        options: {
            limit:160000,
            name: 'imgs/[name].[hash].[ext]'
        }
    }]
}

limit是指图片大小上限，单位是字节，如果图片大小小于这个值，就会被打包为base64格式，否则就仍是图片。

插件plugins

插件目的在于解决 loader 无法实现的其他事。
基本用法拿HtmlWebpackPlugin这个插件来模拟下，这个插件可以自动生成基本的html页面。首先安装：

npm install --save-dev html-webpack-plugin

在webpack.config.js文件中添加一个HtmlWebpackPlugin常量，引用此插件，然后在plugins节点，加上此插件实例。

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: {
        index: './src/index.js',
    },
    output: {
        path: path.join(__dirname,'dist'),
        filename: 'index.js'
    },
    module: {
        rules: [..]
    }
    plugins: [new HtmlWebpackPlugin()],
    mode: 'production',
}

webpack热更新

热更新的意思就是可以在编辑器上修改代码的同时，在浏览器上看到同步更新效果。
先安装webpack-dev-server依赖

npm i webpack-dev-server -D

在package.json添加配置

{
  "name": "csdn",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
	"build": "webpack",
	"dev": "webpack-dev-server --open"
  },

然后在webpack.config.js中添加配置，先声明一个常量webpack

const webpack = require('webpack');

再添加一个插件到plugins节点下的数组里

new webpack.HotModuleReplacementPlugin()

最后再添加一个与plugins同级的devServer配置，其中contentBase表示此热更新打包是针对dist文件里的内容，hot:true表示开启了热更新状态。

devServer: {
	contentBase: './dist',
	hot: true
},

清理输出文件

清理 /dist 文件夹:在每次构建前清理 /dist 文件夹,这样我们的dist文件不会冗余。
安装clean-webpack-plugin

npm install clean-webpack-plugin --save-dev

然后在webpack.config.js中添加配置，先声明一个常量CleanWebpackPlugin

const {CleanWebpackPlugin} = require('clean-webpack-plugin');

再添加一个插件到plugins节点下的数组里

new CleanWebpackPlugin(),

mode

mode这个配置参数用来指定当前的运行环境的，这个配置是webpack4提出来的，它有三个值：“production” | “development” | “none”，production就是生产环境，即最终部署环境；development是开发环境；none即不指定环境因素，默认是production。

补充

全局安装

-g ||- -global: 其中参数-g的含义是代表安装到全局环境里面，包安装在Node安装目录下的node_modules文件夹中，全局安装后可以供命令行(command line)使用，用户可以在命令行中直接运行该组件包支持的命令。

本地安装

- - save-dev: 其中参数–save-dev的含义是代表把你的安装包信息写入package.json文件的devDependencies字段中，包安装在指定项目的node_modules文件夹下。
- - save： 使用命令 --save 或者说不写命令 --save ,都会把信息记录到 dependencies 中；dependencies 中记录的都是项目在运行时需要的文件；
devDependencies 中记录的是项目在开发过程中需要使用的一些文件，在项目最终运行时是不需要的；也就是说我们开发完成后，最终的项目中是不需要这些文件的