开车之前，先介绍一些npm的命令：

：D
进入D盘

mkdir webapp

创建webapp文件夹

cd webapp

进入webapp文件夹

mkdir webapp && cd webapp

以上两步创建和进入文件夹可以合并为一步

npm init -y

快速生成package.json文件

npm install xxx --save-dev

//安装模块并加入到开发依赖中，比如webpack

npm install xxx --save

安装模块并加入到生产依赖中，比如Jquery

npm install xxx@2.3.0

下载指定版本

npm view webpack versions --json

如果忘记版本号，可以列出所有版本号

npm install -g cnpm --registry=https://registry.npm.taobao.org

下载淘宝镜像源，国内npm下载很慢，而且有些包下下来貌似会有问题，比如node-sass。

下载之后就可以直接使用了，使用方式跟Npm一样，只不过是改成cnpm

cls

清空命令提示符窗口内容

webpack

1. html篇

介绍完npm基本的东西后，下面开始撸webpack

有关webpack的基本概念建议到官网查看，解释的更为清楚，下面只简单介绍。

1.  在根目录下生成package.json文件： npm init -y 2. 安装webapck cnpm install webpack --save-dev 3. 创建webpack.config.js文件： echo > webpack.config.js
var path=require("path"); module.exports={ <!-- 要打包的文件 --> entry:"./index.js", output:{ <!-- 指定打包后的文件名字 --> filename:"bundle.js", <!-- 打包后的文件路径 --> path:path.resolve(__dirname,"dist") } }

4.创建src目录，并在src目录下创建index.html, index.js文件并随便输一点东西
window.onload=function(){ alert(1) } 

5.执行 webpack 命令，可以发现webpack帮我们在dist下生成了一个main.js文件,打开main.js并拖到最下面你会发现index.js的内容就在里面。 打包完之后，我们在dist生成了js文件，但是我们的index.html在src下面，你可以手动的复制src下的html文件到dist目录下，并且将打包后的js文件引入。不过像我们这么懒的人，还是希望webpack能够帮我们在dist下也生成index.html，要是能自动引入打包后的js文件，那就再好不过了。这时候，是时候来一发插件了。 6.cnpm install html-webpack-plugin --save-dev
修改webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin'); var path = require("path") module.exports = { entry:"./index.js", output: { path: path.resolve(__dirname, 'dist'), filename:"bundle.js", }, plugins: [new HtmlWebpackPlugin({ title: "测试" })] };

重新执行命令 webpack ,你会发现在dist下多生成了一个index.html文件，打开发现还有一个script的标签引用着我们打包后的文件，nice。不过问题又来了，html文件很简陋，就是emmet帮我们生成的Html5文件，你可能希望还带有更多的 meta标签，像这样的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no, email=no"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> </head> <body> <header></header> <nav></nav> <div id="app"></div> <footer></footer> </body>

此时，你可以自己写一个模板，只需要告诉html-webpack-plugin插件文件的位置就可以了。
修改webpack.config.js
plugins: [new htmlWebpackPlugin({ title:"首页", <!-- 指定模板位置 --> template:'./src/index.html', <!-- 指定打包后的文件名字 --> filename: 'index.html' }) ]

对于多疑症的你，打包多次后你可能会怀疑文件修改生效了没有，此时你可以安装clean-webpack-plugin插件，在每次打包时，先删除原来的dist目录，再重新打包，这样就可以放心的睡觉，不用担心门没关了。
7.cnpm install clean-webpack-plugin --save-dev
plugins:[new htmlWebpackPlugin({ title:"首页", template:'./src/index.html', filename: 'index.html' }), <!-- 每次打包前先删除dist目录 --> new CleanWebpackPlugin(['dist']) ]

css篇

以往我们写css都是写好后手动通过link引入到html,使用webpack后，你将不再需要手动做这些操作,只需要在js文件中引入，webpack就能帮你搞定，不过需要一些loader和plugin的支持。

cnpm install --save-dev css-loade style-loader

修改webpack.config.js
###为了处理css文件我们需要多配置一个module参数,并使用css-loader来将css文件打包到成“字符串”到js文件中，并使用style-loader将打包后的字符串提取出来并append<style>标签到head下面 var path=require("path"); var htmlWebpackPlugin=require('html-webpack-plugin'); var CleanWebpackPlugin = require('clean-webpack-plugin'); module.exports={ entry:{ main:'./src/index.js' }, output:{ filename:"bundle.js", path:path.resolve(__dirname,'dist') }, module:{ rules:[ <!-- test检测到以xxx结尾的东西use对应的loader --> { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] }, plugins:[ new htmlWebpackPlugin({ title:"首页", template:'./src/index.html', filename:"index.html" }), new CleanWebpackPlugin(['dist']) ] }

哦，听说你想用sass 预处理 器,那么只需要在use里加多一个sass-loader,并安装依赖
cnpm install --save-dev sass-loader node-sass rules:[ { test: /\.scss$/, use: [ 'style-loader', 'css-loader',"sass-loader" ] } ]

什么，想要自动补全浏览器后缀autoprefixer？没问题
cnpm install --save-dev  postcss-loaderrules:[ { test: /\.s?css$/, use: [ { loader: "style-loader" }, { loader: "css-loader" }, { loader: 'postcss-loader', options: { plugins: [ require('autoprefixer')({ browsers: ['last 10 versions'] }) ] } }, { loader: "sass-loader" } ] } ]

这里需要注意，use里面的执行顺序是倒序的 ，,webpack会以倒叙的方式处理并将处理后的结果返回给上一个loader，最后通过style-loader将文件的内容append到head下面的style标签里。

教练，我还想要自动刷新

当你修改一点文件后，你需要重执行命令新编译文件，然后刷新页面。如果你使用过gulp的自动刷新比如live-reload，那你也一定希望webpack也有同样的功能，webpack-dev-server满足你的需求并且能够给你更多。

安装webpack-dev-server到开发依赖  cnpm install --save-dev webpack-dev-server
<!-- 在package.json中加入： --> "scripts": { "dev": "webpack-dev-server" }

通过npm run dev即可执行创建一个服务器，打开localhsot:8080
此时再修改文件，你会发现页面自动刷新了并且修改生效了，不过你看不到重新编译后的文件在哪里，应为webpack-dev-server将文件编译到了内存中 ，比起重新生成文件效率会更高，当然只适用于开发阶段。
启动服务后，如果你 还想让他自己 打开Localhost，还想 使用模块热重载 ，可以加多一个配置
devServer:{open:true, hot: true,// 告诉 dev-server我们想用HMR模式 }

开发的时候我们并不在意 style这种形式，但是我们希望在生产环境下 css能从js文件宏分离出来，我们希望能css能跟js并行加载，而且可以避免因为Js文件过大，加载慢而产生的flash of unstyle(无样式页面闪烁)。
使用“extract-text-webpack-plugin”插件来分离css代码。

修改webpack.config.js

cnpm install --save-dev  extract-text-webpack-plugin
var path=require("path"); var webpack=require('webpack'); var htmlWebpackPlugin=require('html-webpack-plugin'); var CleanWebpackPlugin = require('clean-webpack-plugin'); var ExtractTextPlugin = require("extract-text-webpack-plugin"); var extractSass = new ExtractTextPlugin({ filename: "[name].[contenthash].css", disable: process.env.NODE_ENV === "development" }); //通过设置环境变量来告诉webpack我们在development模式下不需要提取css到单独在文件，只有当不是development下（也即是production）才需要提取文件。 module.exports={ entry:{ main:'./src/index.js' }, output:{ filename:"bundle.js", path:path.resolve(__dirname,'dist') }, devServer:{ open:true, hot: true, <!-- 告诉 dev-server我们想用HMR模式 --> }, module:{ rules:[ { test: /\.s?css$/, use: extractSass.extract({ use: [ { loader: "css-loader" }, { loader: 'postcss-loader', options: { plugins: [ require('autoprefixer') ] } }, { loader: "sass-loader" }], fallback: "style-loader" }) } ] }, plugins:[ <!-- 使用此插件来支持热重载 --> new webpack.HotModuleReplacementPlugin(), new htmlWebpackPlugin({ title:"首页", template:'./src/index.html', filename:

webpack实用配置相关推荐

  1. webpack 实用配置总结

    1.webpack.config.js配置文件为: //处理共用.通用的js var webpack = require('webpack'); //处理html模板 var htmlWebpackP ...

  2. Webpack实用工具之webpack-server

    Webpack实用工具之Webpack-server 一.webpack-server的原理简单解读 使用webpack-server时,webpack-server会为我们的当前的项目开启一个服务器 ...

  3. 实战 webpack 4 配置解析一

    配置 github 仓库:https://github.com/nystudio107/annotated-webpack-4-config 随着Web开发变得越来越复杂,我们需要工具来帮助我们构建现 ...

  4. vue + webpack 实用技巧

    vue + webpack 实用技巧 利用 webpack 给生产环境和发布环境配置不同的接口地址 在开发时,前后端分离同时进行开发.前端调用后端给的接口也是在局域网内部的.但是,当项目推到线上的时候 ...

  5. 从零搭建个人博客(1)-webpack环境配置

    本文作为搭建个人博客的开端,将会配置环境,以后做别的project也可以以此开始.代码托管在github. code: https://github.com/MSChuan/Blog-UI, demo ...

  6. 建立项目的webpack简单配置

    实战项目中的 Webpack 配置: 说明:以下命令通过 Git Bash 执行 1.建立webpack-demo文件夹及npm初始化 Administrator@PC-20170414ZFJO MI ...

  7. Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue

    Vue 单文件组件 传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...

  8. reactjs使用eject暴露webpack核心配置

    reactjs使用eject暴露webpack核心配置

  9. 六、Webpack详解学习笔记——webpack的安装、起步、配置、loader的使用、webpack中配置Vue、plugin的使用、搭建本地服务器、webpack配置的分离

    一.认识webpack 什么是webpack? 这个webpack还真不是一两句话可以说清楚的. 我们先看看官方的解释: At its core, webpack is a static module ...

最新文章

  1. HDU 4292 Food(dinic +拆点)
  2. WPF 与Surface 2.0 SDK 亲密接触 - ScatterView 数据绑定篇
  3. 第44节：Java当中的JVM
  4. c语言main函数的参数argc，argv说明
  5. 松阳天气预报软件测试,松阳天气预报15天
  6. 我的特长是计算机VF编程,2016计算机二级考试VF模拟题及答案
  7. Unity3D与VS2008结合，加快Unity3D C#开发！
  8. Using Sqoop 1.4.6 With Hadoop 2.7.4
  9. Mac下 javac java 进行编译和运行含有包路径及引入jar包的类
  10. 【相机标定系列】双目相机标定要求，基础知识，相机参数
  11. 【cherry键盘白送】有人在云上送来一波双十一福利
  12. python门店会员管理系统_python---CRM用户关系管理
  13. B站4K视频下载方法
  14. 公众号封面图内容数据提取软件
  15. 自定义PPT背景的大小
  16. Unity 3D 中基础的三种传值技术（脚本组件，类静态字段，SendMessage）
  17. python 读取gif_如何使用opencv（python）从url读取gif
  18. conenct的用法（2种方法）
  19. 针对于“上传文件”和“触发方式” 的解决方案（Antd个例）
  20. TypeError: unsupported operand type(s) for //: ‘str‘ and ‘int‘

热门文章

  1. 最大子列和问题（JAVA）
  2. js中给多个class属性的标签赋值
  3. linux arm current_thread_info定义,linux 内核 current全局变量
  4. dt程序网站服务器配置,ZKWeb 官网与演示站点的部署步骤 (Linux + Nginx + Certbot)
  5. 移动端html搜索怎么写,移动端实现搜索功能
  6. mysql优化插入速度的方法_优化MySQL插入方法的五个妙招
  7. zemax设置 像方远心_ZEMAX相机标定非常不完全指南
  8. c语言求树上节点的双亲,用非递归算法求二叉树叶子结点的c语言代码怎样写？...
  9. jq苹果手机全屏下点击无效果_苹果系统自带外挂？无需越狱也可录制动作脚本...
  10. Java中的对象、private关键字、this关键字、构造方法