webpack使用笔记

webpack简介

CommonJS和AMD是用于JavaScript模块管理的两大规范，前者定义的是模块的同步加载，主要用于NodeJS；而后者则是异步加载，通过requirejs等适用于前端。npm已跻身主流JavaScript组件发布平台，越来越多的前端项目也依赖于npm上的项目，或者自身就会发布到npm平台。因此，让前端项目更方便的使用npm上的资源成为一大需求。除此之外，如果你的代码里面还有非模块化的部分，那么，webpack也可以兼容，并且是不二选择！

不仅仅如此，webpack还可以编译Less/SASS/CoffeeScript，比如在页面中插入一段HTML，比如修改替换文本文件等等，如下图所示，所以功能很强大。

和seajs\requirejs不一样，webpack是一个在开发阶段进行打包的模块化工具，也就是说不经过打包不能直接在线上使用。

webpack的优点

1.对COMMONJS、AMD、ES6语法做了兼容。

2.对js,css,图片资源都可以打包，可以替代gulp等的工作，比如打包、压缩混淆、图片转base64等。

3.串联式模块加载器及插件机制，有很好的灵活性和扩展性，例如对Coffee，ES6的支持。

4.有独立的配置文件webpack.config.js.

5.可以将代码切割为不同的chunk,实现按需加载，减少了初始化时间。

6.支持SourceUrls和SourceMaps，便于调试

7.强大的Plugin接口，很多内部插件，使用起来比较灵活。支持React的热插拔。

8.webpack使用异步IO并有多级缓存，这样很快，在增量编译上更快。

webpack使用

安装

$ npm install webpack -g

如果是常规项目，一般是把依赖写入 package.json 包：

$ npm init
$ npm install webpack --save-dev

配置

上面说过他有一个配置文件：webpack.config.js，是这样的：

var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');module.exports = {//plugins
    plugins: [commonsPlugin],//entry
    entry: {index : './src/js/page/index.js'},//output
    output: {path: 'dist/js/page',filename: '[name].js'},module: {//loaders
        loaders: [{ test: /\.css$/, loader: 'style-loader!css-loader' },{ test: /\.js$/, loader: 'jsx-loader?harmony' },{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'},{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}]},//resolve
    resolve: {root: 'E:/github/flux-example/src', extensions: ['', '.js', '.json', '.scss'],alias: {AppStore : 'js/stores/AppStores.js',ActionType : 'js/actions/ActionType.js',AppAction : 'js/actions/AppAction.js'}}
};

其中：

1.plugins：插件项目，上面例子的CommonsChunkPlugin 插件是用来提取多个入口文件的公共模块的，然后将公共模块打包到一个独立的文件中去，以便在其它的入口和模块中使用。一个例子：

var webpack = require('webpack');//require webpack
module.exports = {entry:{main1:'./main',main2:'./main.2'},output:{filename:'bundle.[name].js'},plugins: [new  webpack.optimize.CommonsChunkPlugin('common.js', ['main1', 'main2'])]
};

重新打包之后，可以看到多了common.js.

2.entry是页面入口文件配置，output是对应输出项配置（就是入口文件最终要生成什么名字的文件、存放的位置），一个更简单的配置文件webpack.config.js：

module.exports = {entry:'./example1.1',output:{filename:'bundle1.1.js'}
};

打包好了之后，可以看到，生成了bundle1.1.js.

3.module.loaders配置加载器。loader是webpack中一个重要的概念，它是指用来将一段代码转换成另一段代码的webpack插件。为什么需要将一段代码转换成另一段代码呢？这是因为webpack实际上只能处理JS文件，如果需要使用一些非JS文件（比如css文件），就需要将它转换成JS再require进来。上例子，先准备好一个css文件，需要提前安装好css-loader：

安装：

npm install css-loader --save

配置loader:

module.exports = {entry: "./entry.js",output: {path: __dirname,filename: "bundle.js"},module: {loaders: [{ test: /\.css$/, loader: "style!css" }]}
};

更多loader可以看看这里。

4.resolve:绝对路径、自定义扩展名、模块别名的配置。

运行

$ webpack --display-error-details

其他相关的参数介绍：

$ webpack --config XXX.js   //使用另一份配置文件（比如webpack.config2.js）来打包

$ webpack --watch   //监听变动并自动打包

$ webpack -p    //压缩混淆脚本

$ webpack -d    //生成map映射文件

参考：http://webpack.github.io/docs

转载于:https://www.cnblogs.com/linda586586/p/5255404.html

webpack使用笔记相关推荐

webpack 实践笔记（一）--- 入门
webpack 实践笔记入门(一) [webpack官网文档地址]:(http://webpack.github.io/docs...) [实践工程地址]: (https://github.com/s ...
webpack学习笔记1
webpack学习笔记1:基本概念前言: 现在在日常的开发中,webpack已经是必不可少的东西了,现在的需求基本都是用webpack对资源进行打包整合,所以打算写一点关于webpack的东西,这是 ...
webpack学习笔记（三）：监听文件变化并编译
在上一篇webpack学习笔记中主要认识了webpack配置文件中相关的基础配置和命令的执行.这次学习如何在文件发生变化时自动打包编译. 首先,我们来看一下配置文件 const path = requ ...
webpack学习笔记（二）：认识配置和命令执行
在上一篇webpack学习笔记中,直接在命令行中使用npx webpack对项目进行打包时所使用的配置都是默认的,入口文件默认是src目录下的index.js文件,输出文件默认是dist文件夹下的ma ...
webpack简单笔记
本文简单记录学习webpack3.0的笔记,已备日后查阅.节省查阅文档时间安装可以使用npm安装 //全局安装 npm install -g webpack //安装到项目目录 npm insta ...
webpack学习笔记（六）：图片打包处理
本片文章将记录webpack中如何处理图片的打包问题.在介绍图片打包处理之前,先说明一下引入图片的三种方式: 使用背景图片:将一个包裹图片的元素的css中的background属性设置为图片路径使用 ...
webpack学习笔记（一）：认识webpack
初识webpack 根据官网介绍, webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具.当 webpack 处理应用程序时,它会在内部从一个或多个入口点构建一个依赖图 ...
webpack学习笔记
看这篇文章的学习总结. webpack工作流程: 1. 配置entry,output. output的配置要注意pubilcPath这个属性,这个属性指明在浏览器中如何加载生成的打包文件.这个属性在加 ...
webpack 优化笔记
优化可以从哪些方面入手 1.优化开发体验优化构建速度,项目庞大时构建的耗时比较久优化使用体验,通过自动化手段完成一些重复工作 2.优化输出质量减少用户感知到的加载时间,即首屏加载时间提升流畅度 ...
我的webpack学习笔记（二）
前言上一篇文章我们讲了多页面js的打包,本篇文章我们继续scss的打包. 多页面css单独打包首先,我们css编写采用的是sass,所以我们先来安装sass-loader以及可以用到的依赖 $ n ...

webpack使用笔记

webpack使用笔记相关推荐

最新文章

热门文章