webpack入门手册
来源:互联网 发布:电信网络制式 编辑:程序博客网 时间:2024/06/10 02:36
一、命令及最终代码
// 安装webpack1.9.11版本,也可以不指定版本$ npm init$ npm install webpack@1.9.11 --save-dev// 安装css打包依赖模块$ npm install --save-dev extract-text-webpack-plugin style-loader css-loader// 安装sass打包依赖模块$ npm install --save-dev node-sass sass-loader// 编译ES6为一般的jsnpm install --save-dev babel-loader babel-corenpm install --save-dev babel-preset-es2015npm install --save-dev babel-polyfill(可选) (以下2个可选,建议安装,安装后编译出来的代码更高端)npm install --save-dev babel-plugin-transform-runtimenpm install --save-dev babel-preset-stage-3 babel-runtime
webpack配置文件webpack.config.js
var webpack = require('webpack');// 引入css 单独打包插件var ExtractPlugin = require('extract-text-webpack-plugin');// 设置生成css 的路径和文件名,会自动将对应entry入口js文件中引入的CSS抽出成单独的文件var packCSS = new ExtractPlugin('../cssBuild/[name].min.css');module.exports = { // 配置入口 entry: { index: './js/test.js' }, // 编译后的文件路径 output: { path: './build/jsBuild', filename: '[name].build.js' }, module: { // 编译规则 loaders: [ // 编译ES6 { test: /\.js$/, exclude: /(node_modules|bower_components)/, loader: 'babel-loader', options: { cacheDirectory: true, presets: ['es2015', 'stage-3'] } } //.css 文件使用 style-loader 和 css-loader 来处理 { test: /\.css$/, loader: ExtractPlugin.extract("style-loader", "css-loader") }, { test: /\.scss|\.sass$/, loader: ExtractPlugin.extract('style-loader', 'css-loader!sass-loader') } ] }, // 辅助的插件 plugins: [ packCSS ]}
test.js文件
require('../css/test.scss');require('../css/test2.css');require('../css/test3.sass');
webpack.config.js的配置项介绍:
- entry —— 用于设置 webpack 执行打包文件的入口,是一个数组
- output —— 用于指定生成文件的路径以及文件名等
- path —— 指定生成文件路径
- publicPath —— 指定域名公共路径
- filename —— 指定生成文件的名称
- module —— 主要用于配置 loaders
- loaders —— 用于配置对应后缀的文件使用何种加载器进行处理
test — 使用正则表达式来指定某种特定的文件类型
exclude — 排除某个文件夹下的文件进行处理
loader — 指定相应的加载器,多个加载器使用 ! 进行连接,每个 loader 都可以省略其后缀,如 babel-loader 可以写成 babel
query — 指定加载器的配置信息,也可以使用 ? 直接连接在 loader 后面
更多的配置信息可以查阅官方文档
https://webpack.github.io/docs/configuration.html
详细介绍
二、webpack使用准备
1、下载并安装nodejs http://nodejs.cn/
2、使用淘宝镜像,提高npm下载速度(可选)
$ npm install cnpm -g --registry=https://registry.npm.taobao.org
注意:
- 安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开,安装完直接使用有可能会出现错误;
- cnpm跟npm用法完全一致,只是在执行命令时将npm改为cnpm(若安装了淘宝镜像,以下操作将以cnpm代替npm)
3、进入项目目录,查看package.json
a、若package.json不存在
$ npm init
b、若package.json存在,根据package.json文件安装模块(可选)
$ npm install
4、在项目目录,安装webpack
$ npm install webpack -g // -g表示全局
通常我们会将 Webpack 安装到项目的依赖中,这样就可以使用项目本地版本的 Webpack
$ npm install --save-dev webpack
–save-dev将安装信息保存到package.json文件中(好处,多人开发项目时,别人看到package.json文件就知道这个项目依赖于哪些模块,并且可以通过npm install直接安装所有依赖模块)
三、webpack使用
1、在项目根目录添加webpack.config.js文件
/* webpack.config.js文件 */var webpack = require('webpack');module.exports = { entry: { test: './js/test.js' }, output: { path: './build/jsBuild', filename: '[name].build.js' }, module: {}, plugins: []}
webpack.config.js配置文件详解参见 http://blog.csdn.net/zaichuanguanshui/article/details/53610694
2、js文件压缩打包
// 监听变动,并自动打包$ webpack -w --config webpack.config.js
// 压缩混淆脚本$ webpack –p --config webpack.config.js
区别:后者文本被压缩,注释被删除、变量名被简单字母替换,true\false被替换成1、0等
第一种适用于开发过程,第二种适用于最终版本
3、css文件打包
(1) 安装插件extract-text-webpack-plugin
$ npm install --save-dev extract-text-webpack-plugin
(注:extract-text-webpack-plugin,可能对webpack的版本有要求,若有以下提示或者类似提示,请重新安装指定版本的webpack,
如 $ npm install --save-dev webpack@1.9.11
)
(2) 安装loader:css-loader和style-loader
$ npm install --save-dev css-loader$ npm install --save-dev style-loader
(3) 修改webpack.config.js文件
/* webpack.config.js */var webpack = require('webpack');// 引入css 单独打包插件var ExtractTextPlugin = require("extract-text-webpack-plugin");// 设置生成css 的路径和文件名,会自动将对应entry入口js文件中引入的CSS抽出成单独的文件var packCSS = new ExtractTextPlugin('../cssBuild/[name].min.css'); module.exports = { entry: { test: './js/test.js' }, output: { path: './build/jsBuild', filename: '[name].build.js' }, module: { loaders: [ //.css 文件使用 style-loader 和 css-loader 来处理 {test: /\.css$/,loader: ExtractTextPlugin.extract("style-loader","css-loader")} ] }, plugins: [packCSS]}
(4) 在js中引入相应的css文件
/* test.js */require('./css/test.css')
打包后会在build/cssBuild目录下生成test.min.css文件,css压缩文件的名字是根据引入它的js在webpack.config.js中配置的entry的键名决定的
4、sass文件编译及打包
(1) 安装loader:css-loader和style-loader
$ npm install --save-dev node-sass$ npm install --save-dev sass-loader
(2) 修改webpack.config.js文件
/* webpack.config.js */ ...module.exports = { ... module: { loaders: [ {test: /\.css$/,loader: ExtractTextPlugin.extract('style-loader','css-loader')}, {test: /\.scss|\.sass$/,loader: ExtractTextPlugin.extract('style-loader','css-loader!sass-loader')} ] }, plugins: [packCSS]}
(3) 在js中引入相应的css文件
/* test.js */require('./css/test.scss')
5、ES6编译
(1) 安装加载器 babel-loader 和 Babel 的 API 代码 babel-core
npm install --save-dev babel-loader babel-core
安装 ES2015(ES6)的代码,用于转码
npm install babel-preset-es2015 --save-dev
不同阶段语法提案的转码规则(共有4个阶段),选装一个
$ npm install --save-dev babel-preset-stage-0$ npm install --save-dev babel-preset-stage-1$ npm install --save-dev babel-preset-stage-2$ npm install --save-dev babel-preset-stage-3
用于转换一些 ES6 的新 API,如 Generator,Promise 等
npm install --save babel-polyfill
(2) 修改webpack.config.js文件
/* webpack.config.js */ ...module.exports = { ... module: { loaders: [ { test: /\.js$/, exclude: /(node_modules|bower_components)/, loader: 'babel-loader', // query: {presets: ['es2015']}}, // 作用和options类似 options: { cacheDirectory: true, presets: ['es2015', 'stage-3'] } ] }}
错误处理
1、运行$ webpack -w --config webpack.config.js
时,错误信息如下:
webpack的版本不对,去查看历史安装信息,有如下提示:
解决方案:
重新安装webpack,并指定安装版本
$ npm install --save-dev webpack@1.9.11
- webpack入门手册
- Webpack入门
- webpack 入门
- webpack 入门
- webpack入门
- 入门 Webpack
- WebPack入门
- 入门Webpack
- webpack 入门
- Webpack入门
- webpack入门
- webpack 入门
- webpack 入门
- Webpack 入门
- webpack入门
- webpack入门
- webpack入门
- webpack入门
- C#数据库查询结果赋值给对象
- 面试告一段落
- windows下安装loadrunner的负载端LoadGenerator
- 系统设计之架构设计
- linux常用命令
- webpack入门手册
- jbpm工作流引擎之分支结构
- Java中的多线程你只要看这一篇就够了
- sql优化
- Redis系列(三):Redis发布订阅及客户端编程
- 每天一个linux命令:ping命令
- css3 修改默认滚动轴样式
- 组件化文档
- 深入.NET平台和C#编程第一章回顾