Webpack手动搭建及其介绍

webpack是一个静态资源打包工具（前端必备）

webpack 的特点

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

entry 入口文件
// 文件的核心js文件
output 出口文件
// 打包好的dist文件夹
pligin 插件
// 各类插件
loader 转换器
// 将文件转化为我们想要的文件类型
dev-serve 服务器
// 使我们webpack在本地运行搭建服务器
modo 模式
// 可以切换开发环境和生产环境

webpack 手动搭建步骤

确认当前环境有没有 webpack -v 如若没有 npm i webpack -g下载至本地
在想要成为打包文件的文件夹中，但文件夹名不能为中文，使用 npm init -y 初始化一个package.json
创建一个src，src下面创建一个index.html
src 中创建一个 main.js 作为主要开发文件，在里面进行dom操作，操作html中的root div
打包

创建一个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
下载依赖 cnpm i node-sass sass-loader style-loader css-loader -D
在package.json中配置命令
添加

"dev": "webpack-dev-server --open --port 8888 --contentBase src --hot"

在这里插入图片描述
npm run dev 运行

解析 scss 文件

在webpack.config.js 配置

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

引入jquery

下载 npm i jquery --save

 import $ from 'jquery'
 // 对#root的样式进行改变
 $("#root").css({color:"red",backgroundColor:"green"})

自动生成html页面

下载依赖 cnpm i html-webpack-plugin -D
在webpack.config.js 配置

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

将index.html 模板拿到和src同级

配置完之后再次打包运行即可

Webpack手动搭建及其介绍

猜你喜欢