webpack整理 搭建过程

webpack整理 搭建过程

webpack 是什么？

打包工具 （静态资源打包工具） 前端必备

webpack 的特点？

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

1安装node.js
在cmd 模式下 进行查看node版本 node -v
查看npm 版本 npm -v
2 切换国内
npm install nrm -g 全局安装
4. 查看nrm 列表 ,默认为npm
nrm ls
4切换使用的网址
nrm use taobao
5 安装 webpack
npm install webpack -g

5. 确认 当前环境有没有 webpack -v
6. 在想要成为 打包文件的文件夹中，使用 npm init -y 初始化一个package.json
7. 创建一个src，src下面创建一个index.html ,里面加一个div div随便起一个 id root名字，让引入bundle.js
8. src 中创建一个 main.js 作为主要开发文件，在里面进行dom操作，操作html中的root div
9. 打包 webpack src/main.js --output src/bundle.js
10. 每次打包观看 都打包这么长就 去配置一下
    11.创建一个webpack.config.js

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

1. 运行webpack命令就可以进行打包
2. 建立本地服务器 cnpm i webpack-dev-server -D
3. “dev”: “webpack-dev-server --open --port 8888 --contentBase src --hot”
4. npm run dev 运行
5. 解决报错 cnpm i webpack@4.35.3 webpack-cli@3.3.5 -S
6. npm run dev 就可以正常运行了
7. 下载依赖 cnpm i node-sass sass-loader style-loader css-loader -D

在webpack.config.js 配置 规则

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

16. 自动生成html页面 下载依赖 cnpm i html-webpack-plugin -D
17. 在webpack.config.js 配置
    // 插件

plugins:[
    new htmlWebpackPlugin({
        filename:"index.html",
        template:path.join(__dirname,'index.html')
    })
],

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