webpack基础使用,以及搭建安装

一、什么是Webpack

Webpack是一个前端资源加载/打包工具,他将根据模块的依赖关系进行静态分析,然后讲这些模块按照指定的规则生成对应的静态资源。
sass gulp转换成css文件 一个页面很多个js文件,维护只能加 轻易不能删 页面的优化,js/html/css文件的压缩,图片压缩

webpack的特点?

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

webpack的核心?

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

二、 webpack安装

1、全局安装

npm install -g webpack webpack-cli

2、安装后查看版本号

webpack -v

三、初始化项目

1、创建webpack文件夹
进入webpack目录,执行命令

npm init -y

2、创建src文件夹
3、src下创建一个index.html,里面引入bundle.js

<div id="root"></div>
//引入
<script src="bundle.js"></script>

4、src下创建一个main.js座位主要开发文件,在里面进行dom操作,操作html中的root div

var  root  = document.doucumentElementById('root')
root.innerHTML="hello  webpack"

5、打包 webpack src/main.js --output src/bundle.js
6、每次打包观看 都打包这么长就 去配置一下
7、创建一个webpack.config.js

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

8、运行webpack命令就可以进行打包
9、 建立本地服务器 cnpm i webpack-dev-server -D
10、“dev”: “webpack-dev-server --open --port 8888 --contentBase src --hot”
11、 npm run dev 运行
12、 解决报错 cnpm i webpack@4.35.3 webpack-cli@3.3.5 -S
13、 npm run dev 就可以正常运行了
14、 下载依赖 cnpm i node-sass sass-loader style-loader css-loader -D

15、在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')
    })
],

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

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值