Webpack打包工具学习使用

  Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、
Coffeescript、 LESS 等。

一、核心概念

  入口:webpack打包的入口文件

  输出:这个就是对源代码打包之后,得到的文件,文件我们一般命名为bundle.js

  Loader:默认情况下,webpack只能打包.js结尾的文件,但是webpack提供了很多Loader,能打包项目中任何文件,比如css,vue,png文件都可以打包

  配置文件:简化我们的配置,让我们少写代码

  插件:比如压缩js、比如开发阶段实现的热重载(在代码中保存,浏览器就自动刷新),为了让webpack更加强大

二、实际演练

  前提:安装好`webpack`全局包,输入指令:npm i webpack -g

1、打包单个.js文件

步骤:

  1、在cmd切换到项目根目录

  2、使用webpack全局包打包即可

    格式:webpack 入口文件(entry.js)  输出文件(bundle.js)

    输入指令: webpack entry.js bundle.js

  3、打包得到bundle.js,建立index.html,在index.html中导入打包之后的bundle.js

  4、运行

注意点:在index.html中导入的一定是打包之后的输出文件

2、打包多个具有依赖关系的.js文件

前提:

  在entry.js中的代码中导入依赖的文件

  1、在modul的内容 var name=“张三” 并且进行输出module.exports=name;

  2、在入口文件进行导入modul的内容 const name = require(‘./module.js‘);

  3、然后进行打包得到bundle.js

步骤: 同上

注意点:

  在index.html中导入的一定是打包之后的输出文件 bundle.js,Webpack 会分析入口文件,解析包含依赖关系的各个文件。 这些文件(模块)都打包到 bundle.js 。

3、打包非.js文件 (通过Loaders实现)

  以打包.css文件为例(需要额外做的步骤)

  1、安装style-loader&css-loader:

    先输入  npm init -y   生成一个 package.json 用来装包的 输入指令:cnpm i style-loader css-loader --save-dev

  2、在入口文件中导入css的时候,按照下面这样写 在js中写:require(‘!style-loader!css-loader!./site.css‘)

  3、针对第二步,如果导入的css过多,还可以做一个简化,在入口文件,导入的时候,可以不用写前面的 在js中写:require(‘./site.css‘)

  但是,在使用webpack打包的时候,得这样写 输入指令:webpack entry.js bundle.js --module-bind "css=style-loader!css-loader"

注意点: "css=style-loader!css-loader" 使用双引号即可,不然会报错

4、配置文件(一起打包,重点学习)

作用:简化打包的操作

步骤:

   1、在项目根目录下创建一个文件名称叫 webpack.config.js的文件(默认文件名称)

   2、把我们原先在cmd中写的命令,全部写到webpack.config.js中(在这个文件中进行手动配置)

  3、最后在根目录下,执行webpack即可打包了

  a、在入口文件entry.js中导入想要的文件require(‘./site.css‘)

  b、不是js后缀的文件话在先装对应的loader文件,装之前要生成一个package.json用来装包

  c、在webpack.config.js输写下面的代码

module.exports = {
        entry:‘./entry.js‘, //项目打包的入口文件
        output:{
            path: __dirname,
            filename: ‘bundle.js‘   //输出文件
        },
        module:{                    //配置loader
            loaders: [
                {
                    test: /\.css$/,
                    loader: ‘style-loader!css-loader‘ //loader执行顺序是从后往前
                }
            ]
        }
    }

  e、输入指令:webpack 即可打包 相当于webpack webpack.config.js

5、插件

作用:让我们Webpack的功能更加强大

全局包&本地包:

  (1)安装方式不一样

  全局包 npm i webpack -g 用在终端里面,执行命令

  本地包 npm i webpack --save-dev 用在项目里面的

  (2)安装的地方不一样

  全局包:是安装在个人目录下 C:\Users\你自己的用户名\AppData\Roaming\npm

  本地包:项目的根目录的node_modules中

  1、步骤同上,用之前要在项目中安装本地webpack ,输入指令npm i webpack --save-dev

  2、代码如下:

 var webpack = require(‘webpack‘)

    module.exports = {
        entry:‘./entry.js‘, //项目打包的入口文件
        output:{//输出文件
            path: __dirname,
            filename: ‘bundle.js‘
        },
        module:{ //配置loader
            loaders: [
                {
                    test: /\.css$/,
                    loader: ‘style-loader!css-loader‘ //loader执行顺序是从后往前
                }
            ]
        },
        plugins:[//插件
            new webpack.BannerPlugin(‘...这个文件是被我打包的...‘)
        ]
    }

注意点:

   有些包既要全局安装,又要在项目中安装,不要觉得奇怪,应用的地方不一样 plugins在我们的webpack.config.js中写的时候,必须和entry、output、module同级。

原文地址:https://www.cnblogs.com/goloving/p/8511974.html

时间: 2024-11-04 22:38:54

Webpack打包工具学习使用的相关文章

超简单 webpack 打包工具入门

对前端这个岗位来说,模块化开发是必须要走的一个过程,这其中打包工具的使用必不可少,下面我就说一下 webpack 打包工具的用法,非常简单,学会它,webpack 你就入门了. 使用 webpack 前,你需要准备什么? 安装 node 淘宝镜像 cnpm(最好有) 安装 webpack 如果前两步你都已经有了,那么可以直接跳转到第三步,安装 webpack 命令行如下: 1.全局安装 webpack cnpm install -g [email protected] 这里你可以指定版本安装,也

vue 之webpack打包工具的使用

一.什么是webpack? webpack是一个模块打包工具.用vue项目来举例:浏览器它是只认识js,不认识vue的.而我们写的代码后缀大多是.vue的,在每个.vue文件中都可能html.js.css甚至是图片资源:并且由于组件化,这些.vue文件之间还有错综复杂的关系.所以项目要被浏览器识别,我们就要使用webpack将它们打包成js文件以及相应的资源文件. 二.webpack的功能? 1.它可以吧CSS,JS图片当做模块来处理 2.它可以吧以上的这些文件进行打包压缩成一个JS文件,减少了

Webpack实战(一):Webpack打包工具安装及参数配置

为什么要模块化 javascript跟其他开发语言有很多的区别,其中一个就是没有模块化概念,如果一个项目中有多个js文件,我们只能通过script标签引入的方式,把一个个js文件插入到页面,这种做法会也引起了很多弊端: 需要手动维护JavaScript的加载顺序 多次请求资源,影响了加载速度 在每个script标签中,顶层作用域即全局作用域,如果没有任何处理而直接在代码中进行变量或函数声明,就会造成全局作用域的污染,也会造成命名冲突. 模块化很容易就避免这些问题,避免冲突,合并资源减少网络开销,

webpack打包工具之ts版开发框架搭建

本文用两个框架,一个是threejs,一个是phaser3,其实流程都是一样. nodejs.npm是基础,不再多说! 首先新建一个文件夹命名three-study,然后npm init -y 用webpack工具,第一步要安装webpack主功能包: npm i webpack --save-dev npm i webpack-cli --save-dev 这两个包是webpack最基础的包,如果仅仅只是用于打包,这两个足够了(--save-dev的意思是仅仅用于开发环境). 接下来第二步为里

webpack 打包工具

webpack只解析js文件,其他的文件借助加载解析 webpack基础介绍 html-webpack-plugin --生成html文件 生成多个页面 .解析js文件,并输出 .解析css文件   css-loader .解析sass,less,scss,stylus文件 sass-loader/less-loader/node-sass .解析图片(png.jpg.svg.gif)file-loader/url-loader .给css添加前缀 postcss-loader autopref

使用vue-cli构建 webpack打包工具时,生产环境下,每次build时,删除dist目录,并重新生成,以防dist目录文件越来越多。

首先,需要使用webpack的插件CleanWebpackPlugin,安装命令如下: npm install --save-dev clean-webpack-plugin 其次,需要在生产环境提供的文件:build/webpack.prod.conf.js的plugins节点下添加如下代码: new CleanWebpackPlugin( ['dist'], //匹配删除的文件 { root:path.resolve(__dirname,'../')     //根目录 verbose:tr

webpack构建工具快速上手指南

最近在研究react项目,接触到webpack打包工具.刚接触的时候一脸茫然,经过最近的学习,下面我来带大家开启webpack入门之旅. webpack是什么 webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).样式(含less/sass).图片等都作为模块来使用和处理.当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成少量的 bundle - 通常只

webpack打包(一)

1.安装webpack打包工具 webpack是使用npm安装 npm install webpack -g //全局安装 在命令行中就可以使用webpack这个命令了. 提示:由于npm安装会去找国外镜像,所以安装国内淘宝cnpm镜像 npm install cnpm -g 以后所有的npm操作都用cnpm命令代替就行! 注:webpack采用的是commonJs规范 使用webpack(一) calc.js function add(x, y) { return x + y; } modul

细说前端自动化打包工具--webpack

背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.做网页就和用world编辑一个文档一样,只不过那个工具叫Dreamweaver.一个html页面,夹杂着css,javascript是再常见不过的事了. 随着前端的不断发展,特别是单页应用的兴起,这种所见即所得的IDE工具,就渐渐地退出了前端的主流.一个应用,通常只有一个静态页面(index.html),甚至这个页面的body只有一个或少数几个div组成.这时有