webpack安装和使用--前端必备
来源:互联网 发布:python json 伯乐 编辑:程序博客网 时间:2024/06/05 22:51
代码拆分
Webpack 有两种组织模块依赖的方式,同步和异步。异步依赖作为分割点,形成一个新的块。在优化了依赖树后,每一个异步区块都作为一个文件被打包。
Loader
Webpack 本身只能处理原生的 JavaScript 模块,但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样,任何资源都可以成为 Webpack 可以处理的模块。
智能解析
Webpack 有一个智能解析器,几乎可以处理任何第三方库,无论它们的模块形式是 CommonJS、 AMD 还是普通的 JS 文件。甚至在加载依赖的时候,允许使用动态表达式 require("./templates/" + name + ".jade")。
插件系统
Webpack 还有一个功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的,还可以开发和使用开源的 Webpack 插件,来满足各式各样的需求。
快速运行
Webpack 使用异步 I/O 和多级缓存提高运行效率,这使得 Webpack 能够以令人难以置信的速度快速增量编译。
总结下来其主要的优势:
- 1.按需加载模块,按需进行懒加载,在实际用到某些模块的时候再增量更新
- 2.webpack 是以 commonJS 的形式来书写脚本,但对 AMD/CMD 的支持也很全面,方便旧项目进行代码迁移。
- 3.能被模块化的不仅仅是 JS 了,能处理各种类型的资源。
- 4.开发便捷,能替代部分 grunt/gulp 的工作,比如打包、压缩混淆、图片转base64等。
- 5.扩展性强,插件机制完善
安装
首先要安装 Node.js, Node.js 自带了软件包管理器 npm
用npm 安装webpack
$ npm install webpack -g ////全局安装
此时 Webpack 已经安装到了全局环境下,可以通过命令行 webpack -h 查看相关指令
通常我们会将webpack安装到项目依赖,这样就可以使用本地版本的webpack
//进入项目目录
//确定已有package.json,没有就npm init 创建
$ npm install webpack --save-dev
如果要使用webpack开发工具,要单独安装 webpack-dev-server服务器
$ npm install webpack-dev-server --save-dev
可以使用
$webpack-dev-server
启动
webpack构建命令
webpack的常用参数
$ webpack --config webpack.min.js //另一份配置文件
$ webpack --display-error-details //显示异常信息
$ webpack --watch //监听变动并自动打包
$ webpack -p //压缩混淆脚本,这个非常非常重要!
$ webpack -d //生成map映射文件,告知哪些模块被最终打包到哪里了
随着项目的增长,编译过程可能会越来越长,所以我们可以展示一些进度条以及增加配色来实现更友好地输出。我们可以通过以下命令达到目的:
$ webpack --progress --colors
启动服务器
$ webpack-dev-server --progress --colors
webpack基础使用
首先创建一个learning01的目录,文件夹下包含一个index.html文件,另外有一个js的文件夹(包含三个文件entry.js、module-one.js、module-two.js)基本的目录结构如下图:
我们的目的是运行index文件时,能够执行js文件夹下的js文件,其中一个是入口文件,两个是程序文件。
index.html代码结构如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>Webpack is wonderful</h1>
<script src="bundle.js"></script>
</body>
</html>
module-one代码
console.log('module-one');
module-two代码
console.log('module-two');
entry.js代码
require('./module-one');
require('./module-two');
这个文件里引用的是bundle.js,但是learning文件夹下没有该文件。这时就需要使用webpack编译生成。
安装好webpack<!--- node install webpack -g -->最好采用全局安装。
在命令行执行webpack js/entry.js bundle.js
之后的文件目录结构为
当打开index.html是,在控制台可以看到module-one和module-two的执行。
这样就完成了webpack最基本的编译和运行。
***************************************************************************************************
完成了基础的第一步,接下来添加配置文件。在上面的操作过程中,每次执行编译文件的时候都要手动添加入口文件和编译后的文件,这样很不人性化。
这时就需要一个webpack.config.js文件
module.exports = {
//声明文件来源路径,指定文件的映射关系,利于以后的debug
devtool: "sourcemap",
//入口文件
entry:"./js/entry.js",
//输出文件
output:{
path: __dirname,
filename:"bundle.js"
}
};
目录结构如下:
接下来去命令行直接执行:webpack
可以看到会自动生成两个文件,一个是bundle.js一个是bundle.map.js
bundle.map.js是表示文件生成的映射关系,暂时没用,可以使用于后面的dubug。
*******************************************************************
为了能够使用一些库,或者加载更多的依赖文件loader等,我们需要生成一个package.json。
在命令行执行:npm init
一直enter确认下去,即可生成一个默认的package.json文件。
可以在命令行安装jquery,执行命令:npm install jquery --save-dev
然后可以修改module-one的代码
在命令行执行:webpack,然后打开index.html就可以看到页面显示的是It is true.
说明jquery被引入成功,并且仅仅被module-one引入,不影响module-two文件。
************************************************************************************************************
安装css和babel loader文件
在命令行执行并安装
npm install css-loader style-loader babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime --save-dev
之后就可以在package.json看到一些文件被添加。
然后就可以在webpack.config.js文件中添加配置
//声明文件来源路径,指定文件的映射关系,利于以后的debug
devtool: "sourcemap",
//入口文件
entry:"./js/entry.js",
//输出文件
output:{
path: __dirname,
filename:"bundle.js"
},
module:{
loaders:[
//css-loader style-loader babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime
{
test:/\.css$/,
loader:"style!css"
},
{
test:/\.js$/,
loader:"babel",
exclude:/node_modules/
}
]
}
}
这样我们就可以创建一个css/style.css文件,然后被引入到入口文件entry.js中。
entry.js代码结构
require('./module-one');
require('./module-two');
require('../css/style.css');
在命令窗口执行命令,就可以看到背景色为红色。
在webpack.config.js里配置babel:
babel:{
presets:['es2015','stage-0'],
plugins:['transform-runtime']}
或者放到.babelrc文件中
{
"presets":["es2015","stage-0"],
"plugins":["transform-runtime"]}
babel文件主要是为了可以使用es6.
webpack.config.js代码如下
module.exports = {
//声明文件来源路径,指定文件的映射关系,利于以后的debug
devtool: "sourcemap",
//入口文件
entry:"./js/entry.js",
//输出文件
output:{
path: __dirname,
filename:"bundle.js"
},
module:{
loaders:[
//css-loader style-loader babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime
{
test:/\.css$/,
loader:"style!css"
},
{
test:/\.js$/,
loader:"babel",
exclude:/node_modules/ //【排除该文件夹的js文件不执行】
}
]
},
babel:{
presets:['es2015','stage-0'],
plugins:['transform-runtime']
}
}
引入了babel之后,就可以使用es6语法。
可以将module-one代码修改
import $ from 'jquery';
$('h1').html('It is true and babel is running');
之后就可以在命令窗口运行webpack,此时打开index可以看到页面显示的是It is true and babel is running。说明babel正常运行了。
在vue的项目中引用.scss文件,用webpack编辑
首先安装scss文件的依赖
css-loader
style-loader
vue-style-loader
scss(非必须)
scss-loader
sass-loader
node-sass
然后配置webpack.base.conf.js文件
《添加scss文件解析》
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
'scss': 'style-loader!css-loader!sass-loader'
}
}
},
需要在vue文件style标签使用scss的话,需要声明一下:
<style rel="stylesheet/scss" lang="scss">
- webpack安装和使用--前端必备
- webpack入门--前端必备
- webpack安装和使用
- react安装和使用--webpack
- webpack的安装和使用
- 前端模块化之模块化工具gulp和webpack的安装。
- Webpack Hot Middleware安装和使用
- 使用webpack构建前端项目
- 前端工具webpack和gulp
- webpack安装使用
- 安装及使用webpack
- webpack安装以及使用
- WebPack安装以及使用
- webpack安装使用教程
- webpack安装和配置
- webpack安装和命令行
- webpack安装和初始
- webpack安装和命令行
- 2016 第七届 蓝桥杯C语言B组预赛
- 如何直接读取QCamera的一帧数据
- 优酷播放器与layer弹出层(别的弹出层未测试)遮挡问题
- 剑指Offer17:合并两个排序的链表
- Android 判断字符串是否是URI
- webpack安装和使用--前端必备
- 移植QT5.6到嵌入式开发板(史上最详细的QT移植教程)
- 等距节点插值
- Linux查询之find指令
- [codevs1021] 玛丽卡 优先队列优化dijkstra
- css控制便签内容的长度,超过的文字...
- Best Cow Line POJ
- Apache2.4 + Tomcat7负载均衡和集群(一)
- 你真的了解System.out.println吗?