webpack自动打包、热更新、css-loader、style-loader

一个简单的思维图，不是很规范

首先，项目目录下执行

	npm init -y

webpack 命令行相关的内容都迁移到 webpack-cli，所以除了 webpack 外，我们还需要安装 webpack-cli：

	npm install webpack  webpack-cli -g  --save-dev

安装：

	npm i  webpack-dev-server -D 

安装：

	npm i  webpack -D

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。 例如，加载css文件

	npm install --save-dev css-loader style-loader

项目下创建目录结构如下，html,main.js在src目录下，下面三个配置文件在根目录下

手动创建webpack.config.js下面进行如下的配置：

const path = require('path');

module.exports = {
    mode:"development",//通过选择 development 或 production 之中的一个，开发模式或者生产模式
  entry: './src/main.js',//入口文件
  output: {
    path: path.resolve(__dirname, 'dist'),//出口文件
    filename: 'bundle.js'//出口文件下面的js名字
  },
  module:{
    rules:[
      {
        test: /\.css$/,
        use:['style-loader','css-loader']
      }
    ]
  },
};
//我这里写的配置只是基础，入口出口就只有一个，入口出口有多个还需要修改

package.json下面看有没有漏掉的,如果有遗漏手动加上去，然后执行npm i

"devDependencies": {
    "css-loader": "^3.2.0",
    "style-loader": "^1.0.0",
    "webpack": "^4.40.2",
    "webpack-cli": "^3.3.7",
    "webpack-dev-server": "^3.8.1"
  }

index.html页面下：

    
    
    
    


    
哈哈哈

index.css页面下：

body{
    background:red;
}

main.js文件下：

import './css/index.css';

执行命令打包后会自动生成dist文件，下面有个bundle.js文件：

	webpack

index.html页面下引入打包好的bundle.js文件：

打开开浏览器看看效果把，这样就行了，但是有一个问题，就是修改css里面的内容后，又需要重新打包，这样就显的很麻烦。那么就往下面看:

package.json目录下script下面加上dev跟build属性

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open",//默认端口号8080，要修改就在后面加上其它端口,看完删除备注不然报错
    "build": "webpack --mode production"
  },

控制台执行：

npm run dev

• 执行完后有一个服务器http://localhost:8080/src/，打开看看body的背景为红色。现在打包后的输出js文件就放在这个服务器上面了

• js文件就在这上面http://localhost:8080/bundle.js可以看看

• 修改index页面，重新引入：

	//注意这里src引入的反斜杠前面不要加.

• 这样就好了，修改css上面的内容，页面也跟着变化，项目做好之后，webpack打包一次，然后把index上面引入的js文件变回来就行了