本质上来讲,webpack是一个现代的JavaScript应用的静态模块打包工具。关键词:静态模块,打包 为什么要用Webpack呢,我们直接将静态资源放那,浏览器用就直接加载渲染不行吗? 不可以,因为有些模块必须经过Webpack做一定处理,处理成浏览器可以用的才行,比如一些CommonJS浏览器就不能直接识别.
一. 对模块化进行解释 二. 对打包的理解 三. 关于webpack和node和npm的关系 四.关于Webpack的一个简单应用 五.webpack.config.js配置和package.json配置 六.webpack中使用css文件的配置
前端模块化:为什么前端需要模块化不需要再说了。
webpack是静态模块资源打包工具,我们需要依赖于node.js,node环境为了可以正常的执行很多代码,必须其中包含各种依赖的包,npm工具(node packages manager)可以对包做一些管理.
如下面的例子,我们在model.js做了两个小工具,用Commonjs模块化规范写的,这样是无法直接在html代码中加载的
于是乎我们用webpack进行一个打包webpack ./src/main.js ./dist/bundle.js
,将main.js打包到./dist/bundle.js,这其中我们在main.js导入的内容也会被自动打包
其内部会做组件内容做一定处理,我们可以直接引用和使用打包后的内容
有的时候我们想要更智能一些,输入一个webpack就可以进行自动的打包,那么我们就可以使用webpack.config.js 如下所示我们用Commonjs语法写了一个入口和出口,另外这里有个path需要定制,这里出口要指定一个绝对路径而不是相对路径(代码中是错误的),但是直接黏贴肯定不好,不方便,而且回头更改位置也会出错,因此我们可以用package.json
module.exports={
entry:'./src/main.js',
output:{
path:'./dist',
filename:'bundle.js'
}
}
package.json定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。
name-包名
version-包的版本号。
description-包的描述。
homepage-包的官网URL。
author-包的作者,它的值是你在https://npmjs.orq网站的有效账户名,遵循"账户名<邮件>"的规则
例如:zhangsan <zhangsang163.com)。
contributors-包的其他贡献者。
dependencies/devDependencies-生产/开发环境依赖包列表。它们将会被安装在node-module目录下。
repository-包代码的Repo信息,包括type和URL,type可以是git或svn,URL则是包的Repo地址。
main-main字段指定了程序的主入口文件,require('moduleName')就会加载这个文件。
这个字段的默认值是模块根目录下面的index.js keywords-关键字
我们用npm init
创建好packagejson
后,就可以如下面这样编写了,首先导入了一个path模块,这个创建好package.json
就有了,我们可以调用path.resolve(__dirname,'dist')
,其中__dirname前面是双下划线,它是一个全局变量可以拿到我们package.json
文件所在的绝对路径,path.resolve(__dirname,'dist')
可以将他们拼接在一起构成一个完成的绝对路径.
const path=require("path")
module.exports={
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'
}
}
这样就可以了,我们通过一个webpack命令即可完成打包
整个流程,创建package.json->输入webpack->从本目录webpack.config.js找到入口和出口进行自动化的打包
我们开发时候一般用npm run build这个命令进行构建打包,那么如何将npm run build和我们刚刚配置的webpack等价呢?查看package.json发现这里实际上存储了一些自定义的脚本,比如这个test,如果我们执行npm run test
就会执行echo \"Error: no test specified\" && exit 1
因此我们可以在scripts里加一段"build":"webpack"
这样我们执行npm run build 就会执行webpack了
在说使用css文件之前我们要说一些webpack的能力问题以及loader概念
比如安装一个css-loadernpm install --save-dev css-loader
注意:这里我们发现style-loader放在css-loader的前面。这是因为style依赖于css而且最主要原因是因为webpack在读取使用的loader的过程中,是按照从右向左的顺序读取的。我们既然用到了style.loader那么我们一样需要安装style.loader
目前,webpack.config.js的配置如下:
关于入口entry:可以是字符串/数组/对象,这里我们入口只有一个,所以写一个字符串即可
出口:通常是一个对象,里面至少包含两个重要属性,path和filename
注意:path通常是一个绝对路径
有的时候我们开发某个项目需要特定版本的webpack,那么我们可以在该项目包下执行npm install webpack,这样就在项目内安装了一个本地webpack,但是如果我们还用的cmd终端的话肯定还是用的全局webpack,如果想用局部的应该使用node_modules/.bin/webpack
package.json中的scripts的脚本在执行时,会按照一定的顺序寻找命令对应的位置。
node-modules/.bin
路径中对应的命令。全局的环境变量
中寻找。npm run build
另外关于webpack版本问题造成无法执行webpack命令
的,记一个错误,后来通过后面连接解决了https://blog.csdn.net/liuhp123/article/details/100518800