webpack2 实践
在CMD生成默认package.json文件:
1 npm init -y
基础安装包:
1 autoprefixer 2 babel-core babel-loader 3 babel-preset-es2015 4 css-loader 5 cssnano 6 extract-text-webpack-plugin 7 file-loader 8 html-webpack-plugin 9 img-loader 10 less 11 less-loader 12 node-sass 13 optimize-css-assets-webpack-plugin 14 postcss-loader 15 sass-loader 16 url-loader 17 webpack 18 webpack-dev-server 19
最终 package.json 文件:
1 {2 "name": "webpack-demo",3 "version": "1.0.0",4 "description": "",5 "main": "index.js",6 "scripts": {7 "test": "echo \"Error: no test specified\" && exit 1",8 "webpack": "webpack --config webpack.config.js --display-modules --progress -w -d --colors ",9 "dev": " webpack-dev-server --progress --inline --hot --colors" 10 }, 11 "keywords": [], 12 "author": "", 13 "license": "ISC", 14 "devDependencies": { 15 "autoprefixer": "^6.7.4", 16 "babel-core": "^6.23.1", 17 "babel-loader": "^6.3.2", 18 "babel-preset-es2015": "^6.22.0", 19 "css-loader": "^0.26.1", 20 "cssnano": "^3.10.0", 21 "extract-text-webpack-plugin": "^2.0.0-rc.3", 22 "file-loader": "^0.10.0", 23 "html-webpack-plugin": "^2.28.0", 24 "img-loader": "^1.3.1", 25 "less": "^2.7.2", 26 "less-loader": "^2.2.3", 27 "node-sass": "^4.5.0", 28 "optimize-css-assets-webpack-plugin": "^1.3.0", 29 "postcss-loader": "^1.3.1", 30 "sass-loader": "^6.0.1", 31 "url-loader": "^0.5.7", 32 "webpack": "^2.2.1", 33 "webpack-dev-server": "^2.4.1" 34 } 35 }
在根目录建webpack.config.js 文件并编写:
1 'use strict';2 3 const webpack = require('webpack'); //webpack模块;4 const path = require('path'); //node 路径模块;5 const ExtractTextPlugin = require("extract-text-webpack-plugin"); //独立打包css模块;6 const HtmlWebpackPlugin = require('html-webpack-plugin'); //html模板模块;7 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); //压缩CSS模块;8 9 module.exports = {10 context: path.resolve(__dirname, './src/j'), //设置原始文件目录;11 entry: { //打包入口;12 app: './index.js', //打包js;13 },14 output: { //打包出口;15 publicPath: "http://localhost:8080/", //配合devServer本地Server;16 path: path.resolve(__dirname, './dist/'), //出口地址;17 filename: 'j/[name].bundle.js', //出口文件名;18 }, 19 module: { //模块;20 rules: [ //原 webpack@1 里 loaders;21 {22 //正则匹配后缀.js文件;23 test: /\.js$/, 24 //需要排除的目录 25 exclude: '/node_modules/', 26 //加载babel-loader转译es627 use: [{28 loader: 'babel-loader',29 //配置参数;30 options: { presets: ['es2015',] }31 }],32 },33 {34 //正则匹配后缀.css文件;35 test: /\.css$/,36 //使用html-webpack-plugin插件独立css到一个文件;37 use: ExtractTextPlugin.extract({38 //加载css-loader、postcss-loader(编译顺序从下往上)转译css39 use: [40 {41 loader : 'css-loader?importLoaders=1',42 43 },44 {45 loader : 'postcss-loader',46 //配置参数;47 options: {48 //从postcss插件autoprefixer 添加css3前缀;49 plugins: function() {50 return [51 //加载autoprefixer并配置前缀,可加载更多postcss插件;52 require('autoprefixer')({53 browsers: ['ios >= 7.0']54 })55 ];56 }57 }58 }59 ]60 })61 },62 {63 //正则匹配后缀.sass、.scss文件;64 test: /\.(sass|scss)$/,65 //使用html-webpack-plugin插件独立css到一个文件;66 use: ExtractTextPlugin.extract({67 use: [68 {69 loader : 'css-loader?importLoaders=1',70 },71 {72 loader : 'postcss-loader',73 //配置参数;74 options: {75 plugins: function() {76 return [77 require('autoprefixer')({78 browsers: ['ios >= 7.0']79 })80 ];81 }82 }83 },84 {85 //加载sass-loader同时也得安装node-sass;86 loader: "sass-loader",87 //配置参数;88 options: {89 //sass的sourceMap90 sourceMap:true,91 //输出css的格式两个常用选项:compact({}行), compressed(压缩一行)92 outputStyle : 'compact'93 }94 }95 ]96 })97 },98 {99 //正则匹配后缀.less文件; 100 test: /\.less$/, 101 //使用html-webpack-plugin插件独立css到一个文件; 102 use: ExtractTextPlugin.extract({ 103 use: [ 104 { 105 loader : 'css-loader?importLoaders=1', 106 }, 107 { 108 loader : 'postcss-loader', 109 //配置参数; 110 options: { 111 plugins: function() { 112 return [ 113 require('autoprefixer')({ 114 browsers: ['ios >= 7.0'] 115 }) 116 ]; 117 } 118 } 119 }, 120 //加载less-loader同时也得安装less; 121 "less-loader" 122 ] 123 }) 124 }, 125 { 126 //正则匹配后缀.png、.jpg、.gif图片文件; 127 test: /\.(png|jpg|gif)$/i, 128 use: [ 129 { 130 //加载url-loader 同时安装 file-loader; 131 loader : 'url-loader', 132 options : { 133 //小于10000K的图片文件转base64到css里,当然css文件体积更大; 134 limit : 10000, 135 //设置最终img路径; 136 name : '/i/[name]-[hash].[ext]' 137 } 138 }, 139 { 140 //压缩图片(另一个压缩图片:image-webpack-loader); 141 loader : 'img-loader?minimize&optimizationLevel=5&progressive=true' 142 }, 143 144 ] 145 } 146 ] 147 }, 148 plugins: [ //插件; 149 //模板插件 150 new HtmlWebpackPlugin({ 151 filename: 'index.html', //设置最后生成文件名称; 152 template: __dirname+'/src/index.html' //设置原文件; 153 }), 154 //独立打包css插件; 155 new ExtractTextPlugin({ 156 filename : 'c/styles.css' //设置最后css路径、名称; 157 }), 158 //压缩css(注:因为没有用style-loader打包到js里所以webpack.optimize.UglifyJsPlugin的压缩本身对独立css不管用); 159 new OptimizeCssAssetsPlugin({ 160 assetNameRegExp: /\.css$/g, //正则匹配后缀.css文件; 161 cssProcessor: require('cssnano'), //加载‘cssnano’css优化插件; 162 cssProcessorOptions: { discardComments: {removeAll: true } }, //插件设置,删除所有注释; 163 canPrint: true //设置是否可以向控制台打日志,默认为true; 164 }), 165 //webpack内置js压缩插件; 166 new webpack.optimize.UglifyJsPlugin({ 167 compress: { //压缩; 168 warnings: false //关闭警告; 169 } 170 }), 171 //webpack内置自动加载插件配合resolve.alias做全局插件; 172 new webpack.ProvidePlugin({ 173 $: 'jquery' //文件里遇见‘$’加载jquery; 174 }) 175 ], 176 devServer: { //设置本地Server; 177 contentBase: path.join(__dirname,'dist'), //设置启动文件目录; 178 port: 8080, //设置端口号; 179 compress: true, //设置gzip压缩; 180 //inline:true, //开启更新客户端入口(可在package.json scripts 里设置 npm run xxx); 181 //hot: true //设置热更新(可在package.json scripts 里设置 npm run xxx); 182 }, 183 resolve:{ 184 //设置可省略文件后缀名(注:如果有文件没有后缀设置‘’会在编译时会报错,必须改成' '中间加个空格。ps:虽然看起来很强大但有时候省略后缀真不知道加载是啥啊~); 185 extensions: [' ','.css','.scss','.sass','.less','.js','.json'], 186 //查找module的话从这里开始查找; 187 modules: [path.resolve(__dirname, "src"), "node_modules"], //绝对路径; 188 //别名设置,主要是为了配和webpack.ProvidePlugin设置全局插件; 189 alias: { 190 //设置全局jquery插件; 191 jquery: path.resolve(__dirname,'./src/j/jquery.min.js') //绝对路径; 192 } 193 } 194 };
webpack 常用命令
1 webpack 最基本的启动webpack命令2 webpack -w 提供watch方法,实时进行打包更新3 webpack -p 对打包后的文件进行压缩4 webpack -d 提供SourceMaps,方便调试5 webpack --colors 输出结果带彩色,比如:会用红色显示耗时较长的步骤6 webpack --profile 输出性能数据,可以看到每一步的耗时7 webpack --display-modules 默认情况下 node_modules 下的模块会被隐藏,加上这个参数可以显示这些被隐藏的模块8 webpack --progress 显示编译进度9 webpack-dev-server --inline 开启更新客户端入口 10 webpack-dev-server --hot 开启热更新
老写那么长的命令四不四撒 所以在package.json 编写 npm scripts 集成命令:
1 "webpack": "webpack --config webpack.config.js --display-modules --progress -w -d --colors ", 2 "dev": " webpack-dev-server --progress --inline --hot --colors"
参考:
http://www.cnblogs.com/auok/p/6420843.html
http://www.css88.com/archives/6992
http://www.css88.com/doc/webpack2/concepts/modules/
webpack2 实践相关推荐
- webpack2 实践系列(二)— entry 和 output
源码地址:https://github.com/silence717/webpack2-demos 具体可参见 demo02-entry-output 目录下 Entry Points entry是w ...
- webpack2诸类事宜
写在最前:webpack的总结也是自己坑过,实践过但是也是针对性的使用,在加上webpack的背景,对于其'原理'方面有很大的不正确的理解,有错误的地方,请尽情指出(乖巧~) 由于版本遇到的问题: 在 ...
- 使用webpack2.0 搭建react.js项目
最近一段时间没有写react.js,发现webpack已经完全升级为2.0了,升级后导致以前的项目不能正常编译,只能重新实践一番 关于webpack2.0和1.x的区别概括起来就是tree shaki ...
- python组件的react实现_React-Router动态路由设计最佳实践
写在前面 随着单页应用(SPA)概念的日趋火热,React框架在设计和实践中同样也围绕着SPA的概念来打造自己的技术栈体系,其中路由模块便是非常重要的一个组成部分.它承载着应用功能分区,复杂模块组织, ...
- python sanic orm_Sanic + 前端MVVM 一种新一代Python高性能全栈开发实践
SanicCRUD-vue Sanic + 前端MVVM 一种新一代Python高性能全栈开发实践 背景 本项目将使用Sanic + Vue2 + Webpack2 配合最简单CRUD的逻辑来展示一个 ...
- 高品质互动在线课堂:前端开发优化实践
互联网教育行业风起云涌,而高品质在线授课平台是每个互联网教育公司的核心和基石.本文是tutorabc前端负责人和君在LiveVideoStackCon 2017上的分享整理,主要介绍了在线授课系统Tu ...
- React Native三端融合在沪江的应用实践
内容来源:2017年3月11日,沪江web前端开发工程师陈达孚在"中生代技术&iTechPlus年度大会(上海)"进行<基于react native三端融合的应用和实 ...
- Web 前端从入门菜鸟到实践老司机所需要的资料与指南合集
http://web.jobbole.com/89188/ 2016 – 对于未来五年内Web发展的7个预测 2015 – 我的前端之路:从命令式到响应式,以及组件化与工程化的变革 怎么成为一名优秀的 ...
- python sanic_Sanic + 前端MVVM 一种新一代Python高性能全栈开发实践
SanicCRUD-vue Sanic + 前端MVVM 一种新一代Python高性能全栈开发实践 背景 本项目将使用Sanic + Vue2 + Webpack2 配合最简单CRUD的逻辑来展示一个 ...
最新文章
- SubVersion(SVN) 服务器Windows安装指南
- CV:人工智能之计算机视觉方向的简介(CV发展史+常用数据集+CV职位)、传统方法对比CNN类算法、计算机视觉十大应用(知识导图+经典案例)之详细攻略
- voxel 与 pixel
- Qt on Andoird 添加开机启动页面
- IOS学习之蓝牙4.0
- Linux popen和pclose启动shell命令的问题思考
- Scrum 项目7.0
- how is SAP UI5 oContext is determined
- Scala的List集合和Set集合
- 原创:协同过滤之ALS
- linux中最常用命令
- Android系统如何录制屏幕(录制成mp4格式)
- 计算机一级考证心得体会,计算机一级考试的心得体会
- 几种数据可视化框架分析
- MySql常见数据类型及五大约束
- python朋友圈图片_教你如何用Python处理图片九宫格,炫酷朋友圈
- JavaSwing编程总结
- 装多系统的U盘启动盘的制作
- 软件测试面试-为什么选择软件测试?
- c语言 ll1文法实验报告,C语言文法 LL(1)文法
热门文章
- python求众数程序_python求众数问题实例
- java set删除第一个元素_Java面试题10(如何取到set集合的第一个元素)
- sqlite php 函数大全,SQLite 表达式
- 1.6.2 java路径下载_《我的世界1.6.2》官方下载 单机我的世界1.6.2中文整合版_SJ3G游戏中心...
- 使用Pad Designer制作焊盘
- 同步电路设计的一些问题(时序分析基础,同步电路设计规则)
- Asp.net中的AJAX学习记录之一 AJAX技术的崛起与Asp.net AJAX的诞生
- Gevent异步服务类实现多姿势WEB实时展示
- CentOS 6.5下SSH总提示Warning: Permanently added '****' (RSA) to the list of known hosts.
- 2)JS动态生成HTML元素的爬取