webpack 模块加载兼打包工具——入门或进阶
来源:互联网 发布:商标图案设计软件 编辑:程序博客网 时间:2024/06/03 16:18
一、 说点废话
1.webpack 是以 commonJS 的形式来书写脚本滴,但对 AMD/CMD 的支持也很全面,方便旧项目进行代码迁移。2.能被模块化的不仅仅是 JS 了。3.开发便捷,能替代部分 grunt/gulp 的工作,比如打包、压缩混淆、图片转base64等
二、 安装(首先你得知道npm包管理器?)
npm install webpack -g //全局安装
安装到项目目录(比如我的项目目录是e:\develop,命令行切换到该项目下)
npm initnpm install webpack --save-dev
webpack基础安装完成
三、开始管理我们的项目
首先需要在项目目录里创建一个配置文件,说白了就是运行任务文件!webpack.config.js,所有打包,模块化管理都必须基于这个文件配置
在使用中会用到并需要安装的一丢丢 Loader,什么是 Loader?就是比如说我们项目中用了sass这种编译文件,那么我们怎么使用webpack实现编译?那就要用到loader了!
我的理解就是:本身在安装webpack的时候除了内置的一丢丢工具,其实我们还需要好多其他工具,那么就是Loader了!!
如下总结了一些Loader:
//**用于独立打包css文件**npm install --save-dev extract-text-webpack-plugin //**babel es2015编译到es5 (babel-loader,babel-core,babel-preset-es2015)**npm install --save-dev babel-loader npm install --save-dev babel-core npm install --save-dev babel-preset-es2015//**es6安全使用脚架**npm install --save-dev babel-polyfill //**项目安装webpack-dev-server服务**npm install --save-dev webpack-dev-server //**全局安装webpack-dev-server服务**npm install webpack-dev-server -g //**项目安装html-webpack-plugin@2r服务**npm install html-webpack-plugin@2 --save-dev//css-loader 处理css中路径引用等问题style-loader 动态把样式写入csssass-loader scss编译器less-loader less编译器postcss-loader scss再处理url-loader 图片处理file-loader 文件处理ejs-loader ejs模版处理
webpack.config.js配置如下:
var webpack = require('webpack');var path = require("path");module.exports = { //页面入口文件配置 //左边的为目标位置,右边为源文件位置 entry: { "dev/build":__dirname+'/src/index.js', }, //入口文件输出配置 output: { path: __dirname+'/', filename: '[name].js' }, plugins: [ //公共模块打包插件(分片) //new webpack.optimize.CommonsChunkPlugin('common.js',["run/js/angular-all","run/js/app","run/css/style"]) new webpack.optimize.CommonsChunkPlugin({ //name:["read","read-common"], name:'read-common', chunks:["read/js/angular-lib","read/js/app","read/css/style"], minChunks: Infinity, }) ], //Loaders配置 module:{ loaders:[ {test:/\.css$/,loader:'style!css'}, {test:/\.js$/,loader:'babel',exclude: /(node_modules|bower_components)/,query:{presets: ['es2015'],compact: false}}, {test:/\.scss$/,loader:ExtractTextPlugin.extract('style', 'css!sass')},//'style!css!sass' }, {test:/\.(png|jpg|svg)/,loader:'url?limit=20000&name=../[path][name].[ext]'} //不能大于20K图片 ] }}/*****(打包CSS样式)**********************************{ test:/\.css$/,loader:'style!css' } ******(编译ES6)*************************************{ test:/\.js$/,loader:'babel',exclude: /(node_modules|bower_components)/,query:{presets: ['es2015'],compact: false} }******(编译SASS)************************************{ test:/\.scss$/,loader:ExtractTextPlugin.extract('style', 'css!sass')},//'style!css!sass' },******(转换图片路径,超过20K的转换成base64)**************{ test:/\.(png|jpg|svg)/,loader:'url?limit=20000&name=../[path][name].[ext]' }*****************************************************/
webpack-dev-server
npm install -g webpack-dev-server // 全局安装npm install --save-dev webpack-dev-server //项目安装(不安装会发生意外!)
命令参数
图例:
- [- -content-base < path > ] //访问根目录
- [- - port < num >] //访问监听端口,默认8080
如何在webpack-config.js里配置
//在module.exports里新增加入以下配置参数 output: { publicPath: "/jiuxu/" }, devServer: { inline: true //实时刷新 }
html-webpack-plugin
这个插件用来简化创建服务于 webpack bundle 的 HTML 文件,尤其是对于在文件名中包含了 hash 值,而这个值在每次编译的时候都发生变化的情况。你既可以让这个插件来帮助你自动生成 HTML 文件,也可以使用 lodash 模板加载生成的 bundles,或者自己加载这些 bundles。
$ npm install html-webpack-plugin@2 –save-dev (安装包)
webpack.config.js配置如下
var HtmlWebpackPlugin = require('html-webpack-plugin')//置入插件参数中plugins: [ //可选参数往下看 new HtmlWebpackPlugin({ title:"webpack create html" })]
自动在 dist 目录中生成一个名为 index.html 的文件,内容如下:
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>webpack create html</title> </head> <body> <script src="index.js"></script> </body></html>
可选参数
- title: 用来生成页面的 title 元素
- filename: 输出的 HTML 文件名,默认是 index.html, 也可以直接配置带有子目录。
- template: 模板文件路径,支持加载器,比如 html!./index.html
- inject: true | ‘head’ | ‘body’ | false ,注入所有的资源到特定的 template 或者 templateContent 中,如果设置为 true 或者 body,所有的 javascript 资源将被放置到 body 元素的底部,’head’ 将放置到 head 元素中。
- favicon: 添加特定的 favicon 路径到输出的 HTML 文件中。
- minify:
minify:{ //压缩HTML文件 removeComments:true, //移除HTML中的注释 collapseWhitespace:false //删除空白符与换行符 }
- hash: true | false, 如果为 true, 将添加一个唯一的 webpack 编译 hash 到所有包含的脚本和 CSS 文件,对于解除 cache 很有用。
- cache: true | false,如果为 true, 这是默认值,仅仅在文件修改之后才会发布文件。
- showErrors: true | false, 如果为 true, 这是默认值,错误信息会写入到 HTML 页面中
- chunks: 允许只添加某些块 (比如,仅仅 unit test 块)
- chunksSortMode: 允许控制块在添加到页面之前的排序方式,支持的值:’none’ | ‘default’ | {function}–default:’auto’
- excludeChunks: 允许跳过某些块,(比如,跳过单元测试的块)
拯救ERROR
linux 安装sass-loader并执行webpack报错:
ERROR in Cannot find module ‘node-sass’
解决:
$ npm install -g cnpm –registry=https://registry.npm.taobao.org //安装cnpm国内源
cnpm install node-sass@latest –save-dev
ERROR:cannot find module ‘watchpack’
解l: Kill 删除整个项目,重新初始化
ERROR : Cannot find module ‘babel-plugin-transform-es2015-function-name’
解:我在2016年12月9号重新搭建了webpack,然后安装babel-es2015时就出现了上面的错误,之前特么是没有这个错误的。然后就安装了这个包:
npm install babel-plugin-transform-es2015-function-name –save-dev
然后特么就没有问题的,特么真特么坑
待续~~~
- webpack 模块加载兼打包工具——入门或进阶
- 【webpack】 模块加载器兼打包工具
- webpack前端模块加载工具
- webpack前端模块加载工具
- 模块打包工具webpack的使用
- 工具学习——webpack 项目打包
- 快速入门webpack模块打包器
- 入门学习webpack打包工具(一)
- Webpack-源码一,使用require加载并打包模块
- Webpack:模块打包原理
- 用webpack打包模块
- webpack 模块打包器
- Webpack前端打包工具
- Webpack前端打包工具
- Webpack前端打包工具
- Webpack前端打包工具
- Webpack前端打包工具
- Webpack前端打包工具
- SeaJS入门
- Uva 11582(Fibonacci循环节)
- 刻录光盘工具
- Revit+对象空间的关系
- 基于多租户的云计算Overlay网络
- webpack 模块加载兼打包工具——入门或进阶
- Android RecyclerView实现多布局切换功能从导入到运行详解,,上方图片轮播,下方多布局加载
- PAT 1090. Highest Price in Supply Chain (25)(求叶节点的最高层数,bfs)
- HDU 1532 - Drainage Ditches
- 安全退出多个activity
- YUV编码为HEVC(H.265)
- 内存管理:03高端内存简介
- typedef的使用方法
- 手机升级到iOS10,用Xcode7.3进行真机调试方法