文章3：webpack（3）

RyanQ 发布于2019-08-26 12:25 / 3237人阅读

摘要：中的会自动的替换中的，也即最后生成的文件叫做。基础路径后面介绍。都需要依赖模块，我也装啦。我将完整的复制一份，当我在打开的时候，它又让我重新在装，以及，后来我全局安装。

备注：说明（第一次写的文章还没有写好就提交啦，这里我接着上篇文章继续写））
上编文章说道安装webpack的顺序不能改变  
下面继续：

一：webpack的目录结构

附上本人webpackdemo01的代码

下面介绍此时如果安装成功之后的文件基本的目录结构

图片都不知道有没有显示出来（写的我一脸蒙）介绍目录结构

   -asset
    -dev
     -index.bundle.js
   -node_modules
   -src
    -index
     -config.json
     -greeter.js
     -index.js
   -views
    -index.html
   -package-lock.json
   -package.json
   -webpack.config.jsasset
    -dev
     -index.bundle.js
   -node_modules
   -src
    -index
     -config.json
     -greeter.js
     -index.js
   -views
    -index.html
   -package-lock.json
   -package.json
   -webpack.config.js
   //(以上就是基本目录结构)

目录结构详解

解释上方的目录结构

asset/dev:（出口文件地址）该目录是执行webpack打包后生成文件的项目，其中包含打包后图片，以及js文件

node_modules:模块依赖文件，本人经验分享，这个文件通常占用的内存比较大，通常可以将其放在当前目录的上一级或者根目录，但是在webpack里面只能放在与webpack.config.js同一级目录，否则找不到该文件，自己写node服务器的时候就可以放在上一层，具体自己也不太清楚，总之，放在该目录就对啦

src：（入口文件地址）放入每一个生成文件的入口地址，我在网上找了许多的目录结构，我觉得这个目前在我看来最好，比如说我们最后生成index.bundel.js文件，而入口文件index.js所有的依赖我们都放在index文件夹中，而且只放与index.js相关的依赖文件，更体现出模块化，当然肯定有更好的目录结构，还望告之

views：最后生成的视图（即HTML文件），里面只需引index.bundle,js文件即可，这种目录结构也是为webpack打包多页面设计的

package-lock.json:该文件存储的是所有依赖模块的文件名，只需要执行npm install 就可以为项目安装所需模块

package.json：基本配置（直接放图啦）

//解释：注意
 "script":{
   "start":"webpack"
  }
 /*
   这条指令还是很好的，当你执行打包操作时，你只需npm start就可以进行打包操作啦，
   npm start是一个特殊指令，了解更多可以参考官方手册，如果是其他的指令，则需要
   使用 npm run [server/build/dev] 等，你还可以自定义其他的脚本（script）指令
   随你高兴 哈哈！！！   
 */

webpack.config.js:(重要的目录)，后面这个目录会越来月丰富，内容越来越多，基本配置直接看图

解释：图中包含配置了打包过程中入口文件与出口文件entry（入口），output（出口）entry可以是键-值对（形如："key":"value"）语法，也可以是对象语法(形如："key":{"key":"value"})，我这里直接使用对象语法，方便后面的多页面，注意：这里必须使用绝对路径，使用__dirname或者使用path对象。"filename"："[name].bundle.js"中的[name]会自动的替换entry中的index，也即最后生成的文件叫做index.bundle.js。"publicPath":""基础路径 后面介绍。

npm官方文档地址

二、webpack的基本使用步骤

前言
前面已经安装了webpack以及解释了webpackdemo的基本目录结构啦，下面就是使用webpack啦，最终的目的我们是生成一个index.bundle.js文件，然后引入html文件就可以啦

执行操作
npm start
解释：该操作相当与执行了webpack这条命令，官方手册有好几种执行方式，但这种最简单，其他集中直接去参考webpack手册吧。webpack4.*都需要依赖webpack-cli模块，我也装啦。这里我遇到个问题。我将webpackdemo01完整的复制一份，当我在打开的时候，它又让我重新在装webpack，以及webpack-cli，后来我全局安装。发现还是不行，这不影响其他操作，只是我自己挖坑！！！

生成文件
执行完上面的操作，就会生成一个index.bundle.js文件在asset/dev/下，怎样引入
直接上图

三、style-loader/css-style/file-loader的加入

同时安装style-loader css-loader file-loader三项的命令

    cnpm i style-loader css-style file-loader --save-dev
    /*
    使用cnpm装模块更快，效果与npm一样，这是一个淘宝镜像npm（推荐使用）
    不知道file-loader可不可以跟这两个同时装，反正另外两个是可以的
    style-loader:
    css-loader:
    file-loader:
    */

四、webpack-dev-server的加入 五、未完待续

混合云私有云买3送3 apache maven 3.0.3 3.5 3.X

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108657.html

webpack入门学习手记（二）

摘要：例如现在的入门学习手记系列。收到粉丝留言和打赏的喜悦。安装上一篇入门学习手记一，主要是介绍了的核心概念，是整个学习过程的基础知识。新生成的类似如下入门学习手记因为生成的内容过多，我直接省略掉了。 showImg(https://segmentfault.com/img/bVbk5Nd?w=1150&h=599); 本人微信公众号：前端修炼之路，欢迎关注。最近开始想要维护一个个人的公众...

Joyven 2019-08-23 14:05 评论0 收藏0
vue-cli中配置webpack系列文章八 ------ 工程常用配置

摘要：根据模板插入等生成最终生成的存放路径，相对于的路径模板路径插入的位置，路径设置属性，属性值是所在的路径。配置后，在使用时将不再需要和进行引入，直接使用即可。一 webpack.base.conf.js 1. entry 为入口文件 1.1 在此可以绑定 babel 垫片处理ie兼容 1.2 我们大部分为单页面应用（SPA），配置多页面也可以在此配置 2. resol...

netScorpion 2019-08-26 13:51 评论0 收藏0
一个现代化的webpack工程初建

摘要：一前言文章介绍了一个现代化的项目的环境是什么样的。其中一个就是引用路径的问题。扩展将单独打包详细介绍见这是一个插件，可以简化创建文件以便为包提供服务。两种环境的配置在中都支持的配置具体的默认配置查询可以移步这里的默认设置。一前言文章介绍了一个现代化的项目的webpack4环境是什么样的。这里只是介绍了基础的功能，如果需要详细的相关只是可以去webpack官网去查阅。代码地址：gi...

MyFaith 2019-08-22 18:07 评论0 收藏0
Webpack 4.0 发布:有哪些新特性？（译）

摘要：有哪些新特性有哪些改进学着使用这个新版本，来构建更快的应用吧。继版本之后，花了将近八个月的时间来发布。的创始人之一，，建议用户使用，以便使用最优的性能，是因为源代码使用了新特性。全新的插件系统配备了全新整改的插件系统。本文原文地址：https://auth0.com/blog/webpac...第一次翻译，不当之处，欢迎指正官方已经发布了Webpack 4.0。有哪些新特性？有哪些...

HitenDev 2019-08-22 15:12 评论0 收藏0
webpack v2升级踩坑笔记

摘要：从再到目前当红明星，前端模块打包技术日新月异，在今年月份和月份左右接连更新了和版本为了减少冗余模块，缩减文件大小，中也加入了关于的特征，可以查看知乎如何评价新引入的代码优化技术的讨论。从Grunt->gulp->webpack,再到目前当红明星rollup，前端模块打包技术日新月异，webpack在今年1月份和6月份左右接连更新了v2和v3版本,为了减少冗余模块，缩减bundle文件...

JayChen 2019-08-20 17:59 评论0 收藏0