Chinaunix首页 | 论坛 | 博客
  • 博客访问: 3295117
  • 博文数量: 306
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 2210
  • 用 户 组: 普通用户
  • 注册时间: 2019-10-28 13:40
文章分类

全部博文(306)

文章存档

2022年(79)

2021年(155)

2020年(50)

2019年(22)

我的朋友

分类: Java

2020-05-12 17:08:41

什么是webpack,为什么要使用它?

webpack核心

1. entry:入口

2. output:出口

3. loader:资源转换器

4. plugin:插件

5. mode:模式

还有其他的打包压缩工具:

grunt

gulp

fis3(百度)

webpack

1、什么是Webpack

WebPack可以看做是资源构建,模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(ScsslessimgscsscommonJs,ES6等),并将其打包为合适的格式提供浏览器使用。

2WebPackGrunt以及Gulp相比有什么特性

Webpack和另外两个并没有太多的可比性,Gulp/Grunt是一种能够优化前端的开发流程的工具,而WebPack是一种模块化的解决方案,

Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个浏览器可识别的JavaScript文件。

 

———下面就开始构建webpack———

1、创建一个项目文件夹

2npm init -y 安装,有关node的必须要有package.join文件

3、利用npm install webpack webpack-cli -D或者npm install webpack webpack-cli --save-dev安装依赖

4、通过 ./node_modules/.bin/webpack -v 来检查是否安装成功

5、在package.json中的script中配置:

 "scripts": {

    "build":"webpack"

  },

6、 在根目录下创建src文件夹,并创建index.js

7、在根目录下运行npm run build , 会构建出dist文件夹,和压缩的main.js文件

webpack4.x 默认是零配置,零配置就是不用配置入口出口输出的文件名,只要npm run build,会自动构建出来,放到dist目录,即main.js文件

webpack即默认的入口:src/index.js,默认出口:dist/main.js

手动配置将入口设置为:src/main.js,出口:dist/bundel.js

8、如果要手动配置,必须要创建webpack配置文件夹,来执行,webpack默认配置文件:webpack.config.js

const path = require('path')

const config = {

    //项目的入口文件,也就是代码执行从这里开始的

    entry: "./src/main.js",

    //项目的输出目录

    output: {

        //获取到当前根目录,在拼接一个dist目录

        path: path.resolve(__dirname, "dist"),

        //输出的文件名

        filename: "bundel.js"

module.exports = config

黄色警告如何解决:webpack.config.js中的mode

指定线上上产环境produciton、开发环境development

设置mode为——>mode:development,

9、安装 npm i clean-webpack-plugin -D 可以自动清理垃圾的打包文件

webpack.config.js中设置 const {CleanWebpackPlugin}=require(clean-webpack-plugin)

plugins:[

//通过plugins实例化

new CleanWebpackPlugin()

10、基于webpack搭建一个本地环境

安装: npm i webpack-dev-server -D

package.js中配置

"scripts": {

    "build": "webpack",

    "dev":"webpack-dev-server"

  },

还可以在webpack.config.js中设置固定的端口号

devServer: {

//实现热更新

        hot:true,

        //设置指定端口号

        port: 9999,

        //最后出书的路径

        contentBase: path.join(__dirname, 'dist')

11、如何实现自动构建注入文件

安装: npm install html-webpack-plugin -D

webpack.config.js中配置

//自动注入

const HtmlwebpackPlugin =require('html-webpack-plugin')

 plugins: [

  //清理垃圾的打包文件

        new CleanWebpackPlugin(),

        new HtmlwebpackPlugin({

            //可以指定文件当模板  让这个文件为入口  读取模板的入口文件

            template:"./index.html",

            //最会将index.html输出到dist文件夹中

            filename:'index.html',

        })

    ],

12webpack默认只识别.js.json文件,如何让webpack识别csslessscsssassimg文件

安装:

1npm install style-loader css-loader -D 识别css;

2npm install less less-loader -D 识别less, 定义less是以@开头 例如:@border_a:#00f;

3npm install sass-loader node-sass -D 识别scss,定义scss是以@开头,例如:@border_a:#00f

4npm install url-loader -D 识别图片格式,

13、要想设置多入口,在webpack.config.js中配置

//项目的入口文件,也就是代码执行从这里开始的

    entry:{

"index":"./src/main.js",

"home":"./src/home.js"

},

    //项目的输出目录

    output:{

      //获取到当前文件的根目录  设置输出目录

    path:path.resolve(__dirname,"dist"),

           //输出的文件名

    filename:"[name].js"   //开启多入口的话这里要写"[name]_[hash:指定hash位数].js"

           //hash只要文件一改,hash就会变,可以实时的更新后台传递数据    //chunk

    },

阅读(1174) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~