webpack整理搭建过程

webpack 是什么？
打包工具（静态资源打包工具）

webpack 的特点？

js依赖进行整合处理（打包整合）
一些预处理的sass，less可以在环境中进行编译（转换）
可以对js、html、图片等进行压缩（优化）

webpack的核心？

entry 入口文件 // 好比main.js
output 出口文件 // 好比dist 打包之后的文件夹
plugin 插件 // 自动生成html文件等插件
loader 转换器 // sass less 转换成我们想要的文件类型
dev-serve 服务器 // 使我们webpack在本地运行服务
mode 模式 // 可以切换开发环境和生成环境

webpack 手动搭建步骤

创建一个文件夹，然后在小黑框进行安装

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

确认当前环境有没有

webpack -v

在想要成为打包文件的文件夹中，使用

npm init -y
初始化一个package.json

创建一个src，src下面创建一个index.html ,里面加一个div div随便起一个 id 名字，让引入bundle.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box"></div>
    <div id="app"></div>
    <script src="/bundle.js"></script>
</body>
</html>

src 中创建一个 main.js 作为主要开发文件，在里面进行dom操作，操作html中的div

let app =document.querySelector("#app")
let box =document.getElementById("box")

app.innerHTML ="今天心情就像天气一样好！"

box.innerHTML="hello webpack!"

创建一个webpack.config.js文件

const path = require("path")
    module.exports = {
        entry:"./src/main.js",
        output:{
            filename:"bundle.js",
            path:path.resolve(__dirname,"dist")
        }
    }

运行webpack命令就可以进行打包
建立本地服务器

cnpm i webpack-dev-server -D

在package.json中配置

“dev”: “webpack-dev-server --open --port 8888 --contentBase src --hot”

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 8888 --contentBase src --hot"
  },

npm run dev 运行
安装sass

cnpm i node-sass sass-loader style-loader css-loader -D

 在webpack.config.js 配置sass规则
    module: {
        rules: [
            //解析.scss文件,对于用 import 或 require 引入的sass文件进行加载，以及...声明的内部样式进行加载            
            {
              test: /\.scss$/,
              use:['style-loader', 'css-loader', 'sass-loader']
            }
        ]
    }

自动生成html页面下载依赖

cnpm i html-webpack-plugin -D
在webpack.config.js中引入 const htmlWebpackPlugin = require(“html-webpack-plugin”)

在webpack.config.js 配置
// 插件
plugins:[
new htmlWebpackPlugin({
filename:“index.html”,
template:path.join(__dirname,‘index.html’)
})
],

配置完之后运行即可, index.html 模板拿到和src同级

webpack整理 搭建过程

悦读

webpack整理搭建过程