详解如何用webpack打包一个网站应用项目

2024-09-29 07:55:06

本文介绍了如何用webpack打包一个网站应用，现在分享给大家，有需要的可以了解一下
随着前端技术的发展，越来越多新名词出现在我们眼前。angularjs、react、gulp、webpack、es6、babel……新技术出现，让我们了解了解用起来吧！今天我来介绍一下如何用webpack打包一个网页应用。

一般我们写页面，大概都是这样的结构：

   index.html
   css
    style.css
   js
     index.js
  ...........

这样我们的html里直接引用css和js，完成一个网页应用。用webpack也类似，只是webpack把图片、css和js都编译打包成一个文件，我们只需要引用一个文件就可以了。

1.我们需要先安装node环境。没安装的请自行安装

2.在项目目录下输入npm init初始化一个node项目，输入项目名称等信息，完成后生成一个package.json文件。

3.在项目目录下安装webpack

npm install --save-dev webpack

4.我们需要一个webpack.config.js文件，记录webpack配置信息。它的配置大概这样：

var webpack = require('webpack');
var path = require('path');
var buildPath = path.resolve(__dirname, 'build');
var config = {
 //入口文件
 entry: {
  index : './src/js/index.js'
 },
 extensions: ['', '.js', '.json', '.css', '.less'],
 output: {
  path: buildPath,  //编译后的文件路径
  filename: 'app.js'
 },
 module: {
  //Loaders
  loaders: [
   //.css 文件使用 style-loader 和 css-loader 来处理
   { test: /\.css$/, loader: 'style-loader!css-loader' },
   { test: /\.less$/,
     loader: 'style-loader!css-loader!less-loader'
   },
   //.js 文件使用 babel 来编译处理
   { test: /\.js$/, loader: 'babel' },
   //图片文件使用 url-loader 来处理，小于8kb的直接转为base64
   { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
   ]

 },
};

module.exports = config;

我们需要指定编译的入口文件和输出的目录路径，以及css和js用什么loader处理，比如我使用了less，要编译less文件，就指定less-loader，js我要用es6来写，为了兼容性，用babel来转成es5的代码。如果要使用react，也可以指定jsx等的编译方式。

5.这些loader都是需要npm安装的

代码如下:

npm install --save-dev css-loader less less-loader style-loader url-loader babel babel-core babel-loader babel-preset-es2015

6.如果需要用babel，在项目目录下新建一个名为.babelrc的隐藏文件，里面这样写：

{"presets":["es2015"]}

保存。

7.根据配置可以看到我们需要一个src文件夹和一个build文件夹，src放图片、css和js的源代码，build作为输出文件夹放编译后的文件。

8.src/js/index.js文件作为我们的入口文件，我们在里面可以愉快地写es6的代码，比如：

'use strict';
require('../css/base.css');
require('../css/animate.css');
require('../css/style.less');
require('../js/zepto.min.js');
let a = 'world';
let hello = `hello ${a}`;
console.log(hello);

可以看到css我们都通过require的方式引进来，这样webpack会把css和js打包进一个文件。

9.我们还差个index.html，放在项目文件夹下就可以，正常写，引入build/app.js就可以啦！

10.让我们试试吧，在命令行项目目录下运行webpack，哇，成功！

Time: **2622**ms
 **Asset**  **Size** **Chunks**       **Chunk Names**
**app.js** 120 kB    **0** **[emitted]** index
  + 10 hidden modules

可以看到app.js已经生成啦！

tips:

如果我们不想每次修改都手工编译，直接执行webpack --watch就会自动监听文件修改，自动编译。
如果我们想压缩混淆代码，执行webpack -p吧！
如果配置文件不叫webpack.config.js，也可以运行webpack --config *.js指定配置文件。

webpack功能强大，这里只是指引小白开始使用，想深入了解的童鞋快去看官方文档吧！http://webpack.github.io/

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

webpack独立打包和缓存处理详解

前言先前写了一篇webpack入门的文章<webpack入门必知必会>,简单介绍了webpack拆分.打包.压缩的使用方法.本文将在上篇文章的基础上进一步讲解在使用webpack构建的项目中存在的优化方案与解决方法. 上篇文章中写了一份webpack最基本的配置文件来打包压缩我们的代码: var path = require('path'); module.exports = { entry: './app/index.js', output: { filename: 'bundle.js'
Webpack打包慢问题的完美解决方法

前言这几天写腾讯实习生 Mini 项目的时候用上了 React 全家桶,当然同时引入了 Webpack 作为打包工具.但是开发过程中遇到一个很棘手的问题就是,React 加上 React-Router.superagent.eventproxy 这些第三方轮子一共有好几百个 module,Webpack 的打包速度极慢.这对于开发是非常不好的体验,同时效率也极低. 问题分析我们先来看一下完全没有任何优化的时候,Webpack 的打包速度(使用了jsx和babel的loader). 下面是我们
详解webpack+vue-cli项目打包技巧

1.设置config文件夹index.js中productionSourceMap的值为false,也就是设置webpack配置中devtool为false,打包后文件体积可以减少百分之八十!!!!!!! 2.如何实现打包文件中js.css等的版本控制? 设置build文件夹下的webpack.prod.conf.js中HtmlWebpackPlugin插件配置参数添加hash: true,即会使打包生成的index.html中的js和css路径带有?+随机字符串以上就是本文的全部内容,希望对
Vue项目webpack打包部署到服务器的实例详解

Vue项目webpack打包部署到服务器这篇博文主要说的就是我今天遇到的问题,而且在经过我的询问,好多人在打包部署的时候都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这里以Tomcat为例. 必须要配置的就是/config/index.js 在vue-cli webpack的模板下的/config/index.js,我们可以看到assetsPublicPath这个键,并且这个东西还出现了两次,我第一次打包的时候,只是修改了最下面的assetsPublicPath,将它从'/'
Webpack 服务器端代码打包的示例代码

环境变量之前,我们在项目里会经常使用 process.env.NODE_ENV, 但这个变量对于 webpack打包是有影响的, 在 production 的时候是有优化的. 所以, 我们将改用其他的环境变量来区别: new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"', 'process.env.API_ENV': `"${process.env.API_ENV || 'development'
彻底解决 webpack 打包文件体积过大问题

webpack 把我们所有的文件都打包成一个 JS 文件,这样即使你是小项目,打包后的文件也会非常大.下面就来讲下如何从多个方面进行优化. 去除不必要的插件刚开始用 webpack 的时候,开发环境和生产环境用的是同一个 webpack 配置文件,导致生产环境打包的 JS 文件包含了一大堆没必要的插件,比如 HotModuleReplacementPlugin, NoErrorsPlugin... 这时候不管用什么优化方式,都没多大效果.所以,如果你打包后的文件非常大的话,先检查下是不是包含了
关于webpack2和模块打包的新手指南（小结）

webpack已成为现代Web开发中最重要的工具之一.它是一个用于JavaScript的模块打包工具,但是它也可以转换所有的前端资源,例如HTML和CSS,甚至是图片.它可以让你更好地控制应用程序所产生的HTTP请求数量.允许你使用其他资源的特性(例如Jade.Sass和ES6).webpack还可以让你轻松地从npm下载包. 本文主要针对那些刚接触webpack的同学,将介绍初始设置和配置.模块.加载器.插件.代码分割和热模块替换. 在继续学习下面的内容之前需要确保你的电脑中已经安装了Node
详解如何用webpack打包一个网站应用项目

本文介绍了如何用webpack打包一个网站应用,现在分享给大家,有需要的可以了解一下随着前端技术的发展,越来越多新名词出现在我们眼前.angularjs.react.gulp.webpack.es6.babel--新技术出现,让我们了解了解用起来吧!今天我来介绍一下如何用webpack打包一个网页应用. 一般我们写页面,大概都是这样的结构: index.html css style.css js index.js ........... 这样我们的html里直接引用css和js,完成一个网页应
详解如何用js实现一个网页版节拍器

目录引言 1. 需求分析 2. 素材准备 3. 开发实现 3.1 框架选型 3.2 模块设计 3.3 数据结构设计 3.4 播放逻辑 3.5 音频控制 3.6 动效 3.7 大屏展示 3.8 新增人声发音 4. 部署 5. 后续工作 5.1 目前存在的问题 ios声音 5.2 TODO 切换不同音效引言平时练尤克里里经常用到节拍器,突发奇想自己用js开发一个. 最后实现的效果如下:ahao430.github.io/metronome/. 代码见github仓库:github.com/ah
详解如何用JavaScript编写一个单元测试

目录为什么要进行单元测试? 范围界定和编写单元测试保持单元测试简短而简单考虑正面和负面的测试用例分解长而复杂的函数避免网络和数据库连接如何编写单元测试创建一个新项目实现一个类配置和添加我们的第一个单元测试添加更多单元测试修复错误最后测试代码是确保代码稳定的第一步.能做到这一点的最佳方法之一就是使用单元测试,确保应用程序中的每个较小的功能都按应有的方式运行——尤其是当应用程序接收到极端或无效输入,甚至可能有害的输入时. 为什么要进行单元测试? 进行单元测试有许多不同的方法
详解如何使用webpack打包Vue工程

使用webpack打包Vue工程前言入行一年,从什么都不懂的小白,到现在什么都懂一点的小白,也算是飞跃了.感叹一下现在的前端,从nodejs出来到现在各种各样的工具如雨后春笋般的出现.大神们疯狂的造轮子,玩的不亦乐乎.我等小白们,疯狂追赶,学的心肝脾肺都快衰竭.而我的精力也仅限浅尝辄止,但是学多一点总有好处的.本篇文章就是介绍如何使用webpack构建前端工程. 目标本次的工程以Vue.js为主角,Vue.js是一款小巧优雅而且强大的轻量级mvvm框架,配合webpack模块化打包.制作出
详解如何使用webpack打包JS

如何使用webpack打包JS 我们在命令行中输入:webpack -h看看webpack的命令行大全 Usage: webpack-cli [options] webpack-cli [options] --entry <entry> --output <output> webpack-cli [options] <entries...> --output <output> webpack告诉我们,用webpack进行打包有三种方法: 1.新建为webpa
详解如何使用webpack打包多页jquery项目

虽然已经2019年了不过有一些项目还是需要用到jquery的不过考虑到使用jquery的一堆兼容性问题也为了可以顺利地使用ES6来撸代码研究使用webpack+babel打包代码来发布几个重点: 1.为了将模块分割加载,不至于一个js文件过大,一个页面中使用多个js文件 2.由于是多页项目(多个html),每个页面使用的js文件都不一致基于以上两点,需要配置多个入口文件 3.会把小图片转换成base64,所以可能css转成的js文件会比较大,所以css文件都单独设置入口js 例如,
详解window启动webpack打包的三种方法

什么是Webpack WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用. 1.在cmd终端执行 npx webpack命令 2.在package.json文件同级建立webpack.config.js文件,内容如下: const path = require('path'); module.exports = { entry: './
详解如何使用Docker部署一个web项目并打包成镜像文件

docker基本入门以后,可以试试打包docker镜像与dockerfile了 docker镜像 docker hub仓库有2类仓库,用户仓库和顶层仓库,用户仓库由docker用户创建的,顶层仓库由docker内部的人来管理的.仓库里存放的是镜像文件,那么问题来了 ,怎么去创建镜像呢? how to create image 构建docker镜像的有2种方法: 1.使用docker commit命令. 2.使用docker build 命令和Dockerfile文件.在这里并不推荐使用docke
详解如何用VUE写一个多用模态框组件模版

对于新手们来说,如何写一个可以多用的组件,还是有点难度的,组件如何重用,如何传值这些在实际使用中,是多少会存在一些障碍的,所以今天特意写一个最常用的模态框组件提供给大家,希望能帮助到您! 懒癌患者直接复制粘贴即可 Modal.vue组件 <template>  <transition name="modal-fade">  <div class=&qu
详解如何用python实现一个简单下载器的服务端和客户端

话不多说,先看代码: 客户端: import socket def main(): #creat: download_client=socket.socket(socket.AF_INET,socket.SOCK_STREAM) #link: serv_ip=input("please input server IP") serv_port=int(input(("please input server port"))) serv_addr=(serv_ip,ser

详解如何用webpack打包一个网站应用项目

相关推荐

随机推荐