1. 基于 webpack 3.0

2.步骤、说明

2.1 webpack 本地初始化、安装基本包

npm init         》  package.json

npm i  webpack@3.10.0   vue@2.5.13      vue-loader@13.6.0         》  安装webpack和vue,使用vue要安装vue-loader

npm i css-loader@0.28.7  vue-template-compiler@2.5.13       》  根据终端WARN提示安装css-loader,因为vue-loader依赖css-loader

2.2   package.json 配置本项目启动快捷键 build  (npm run build)及 本项目启动配置优于全局

scripts 脚本对象增加配置属性:

"build":"webpack --config webpack.config.js"

2.3 新建 项目文件 webpack.config.js 文件 处理对应文件及其对应 loader 规则

  1. const path = require('path');
  2.  
  3. module.exports = {
  4. entry: path.join(__dirname,'src/index.js'),
  5. output:{
  6. filename:'build.js',
  7. path: path.join(__dirname,'dist')
  8. },
  9. module:{
  10. rules:[
  11. {
  12. test:/\.vue$/,
  13. loader:'vue-loader'
  14. }
  15.  
  16. ]
  17. }
  18. }

2.3.1 打包多个 js

entry: ['./js/a.js','./js/b.js','./js/c.js'],

2.4 打包其他静态资源

npm i style-loader@0.19.1 url-loader@0.6.2 file-loader@1.1.6     》 url-loader   file-loader   处理图片        》style-loader   处理成内联 css  (往上抛的处理顺序)

npm i stylus-loader@3.0.1 stylus@0.54.5    》 处理 styl 后缀样式表

webpack.config.js

  1. const path = require('path');
  2.  
  3. module.exports = {
  4. entry: path.join(__dirname, 'src/index.js'),
  5. output: {
  6. filename: 'build.js',
  7. path: path.join(__dirname, 'dist')
  8. },
  9. module: {
  10. rules: [{
  11. test: /\.vue$/,
  12. loader: 'vue-loader'
  13. }, {
  14. test: /\.css$/,
  15. use: [
  16. 'style-loader',
  17. 'css-loader'
  18. ]
  19. },
  20. {
  21. test: /\.styl$/,
  22. use: [
  23. 'style-loader',
  24. 'css-loader',
  25. 'stylus-loader'
  26. ]
  27. },
  28. {
  29. test: /\.(png|jpg|jpeg|gif|svg)$/,
  30. use: [{
  31. loader: 'url-loader',
  32. options: {
  33. limit: 1024,
  34. name: '[name]-aaa.[ext]'
  35. }
  36. }]
  37. }
  38.  
  39. ]
  40. }
  41. }

index.js

  1. import Vue from 'vue'
  2. import App from './app.vue'
  3. import './assets/images/bg.png'
  4. import './assets/styles/test.css'
  5. import './assets/styles/footer.styl'
  6.  
  7. const root=document.createElement('div')
  8. document.body.appendChild(root);
  9.  
  10. new Vue({
  11. render: h => h(App)
  12. }).$mount(root)

2.5  webpack-dev-server

npm i webpack-dev-server@2.9.1   》 搭建 web 服务器  开发环境  ( 热加载之类 )

npm i cross-env@5.1.3    》根据一个环境变量判断,来判断是开发环境还是正式环境  NODE_ENV就是这个环境变量    解决这种跨平台设置的差异性,我们可以安装cross-env

npm i html-webpack-plugin@2.30.1   》   将我们打包好后的js融入到我们的HTml中去

关键代码

webpack.config.js

  1. const path = require('path');
  2. const webpack = require("webpack")
  3. const HTMLPlugin = require('html-webpack-plugin')
  4.  
  5. //判断是否为测试环境,在启动脚本时设置的环境变量都是存在于process.env这个对象里面的
  6. const isDev = process.env.NODE_ENV === "development"
  7.  
  8. const config ={
  9. target:'web',
  10. entry: path.join(__dirname, 'src/index.js'),
  11. output: {
  12. filename: 'build.js',
  13. path: path.join(__dirname, 'dist')
  14. },
  15. module: {
  16. rules: [{
  17. test: /\.vue$/,
  18. loader: 'vue-loader'
  19. }, {
  20. test: /\.css$/,
  21. use: [
  22. 'style-loader',
  23. 'css-loader'
  24. ]
  25. },
  26. {
  27. test: /\.styl$/,
  28. use: [
  29. 'style-loader',
  30. 'css-loader',
  31. 'stylus-loader'
  32. ]
  33. },
  34. {
  35. test: /\.(png|jpg|jpeg|gif|svg)$/,
  36. use: [{
  37. loader: 'url-loader',
  38. options: {
  39. limit: 1024,
  40. name: '[name]-aaa.[ext]'
  41. }
  42. }]
  43. }
  44.  
  45. ]
  46. },
  47. plugins:[
  48. new webpack.DefinePlugin({ //主要作用是在此处可以根据isdev配置process.env,一是可以在js代码中可以获取到process.env,
  49. 'process.env':{ //二是webpack或则vue等根据process.env如果是development,会给一些特殊的错误提醒等,而这些特殊项在正式环境是不需要的
  50. NODE_ENV: isDev ? '"development"' : '"production"'
  51. }
  52. }),
  53. new HTMLPlugin() //引入HTMLPlugin
  54. ]
  55.  
  56. }
  57.  
  58. if(isDev){
  59. config.devtool = '#cheap-module-eval-source-map'
  60. config.devServer = {
  61. // port: 8000,
  62. // host: '127.0.0.1',
  63. port: 8700,
  64. host: '0.0.0.0',
  65. overlay: {
  66. errors: true,
  67. },
  68. // open: true , //项目启动时,会默认帮你打开浏览器
  69. hot: true //在单页面应用开发中,我们修改了代码后是整个页面都刷新,开启hot后,将只刷新对应的组件
  70. },
  71. config.plugins.push( //添加两个插件用于hot:true的配置
  72. new webpack.HotModuleReplacementPlugin(),
  73. new webpack.NoEmitOnErrorsPlugin()
  74. )
  75. }
  76.  
  77. module.exports = config

package.json

  1. {
  2. "name": "webpack3.0",
  3. "version": "1.0.0",
  4. "description": "",
  5. "main": "index.js",
  6. "scripts": {
  7. "test": "echo \"Error: no test specified\" && exit 1",
  8. "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
  9. "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
  10. },
  11. "author": "",
  12. "license": "ISC",
  13. "dependencies": {
  14. "cross-env": "^5.1.3",
  15. "css-loader": "^0.28.7",
  16. "file-loader": "^1.1.6",
  17. "html-webpack-plugin": "^2.30.1",
  18. "style-loader": "^0.19.1",
  19. "stylus": "^0.54.5",
  20. "stylus-loader": "^3.0.1",
  21. "url-loader": "^0.6.2",
  22. "vue": "^2.5.13",
  23. "vue-loader": "^13.6.0",
  24. "vue-template-compiler": "^2.5.13",
  25. "webpack": "^3.10.0",
  26. "webpack-dev-server": "^2.9.1"
  27. }
  28. }

npm run dev  执行代码     >   http://localhost:8700/

2.6 vue 项目实战

3.相关文章

webpack + vue 项目

webpack3 打包的更多相关文章

  1. element-ui和npm、webpack、vue-cli搭建Vue项目

    一.element-ui的简单使用 1.安装 1. npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i element-ui -S 2. CDN ...

  2. vue学习之webpack

    本质上,Webpack是一个现代 JavaScript应用程序的静态模块打包器(module bundler).当 Webpack处理应用程序时,它会递归地构建一个依赖关系图(dependency g ...

  3. webpack的正确安装方式

    webpack是基于node开发的模块打包工具,所以他本质上是由node实现的. 我们要保持node版本尽量的新,另一个要保持webpack版本尽量的新,高版本的webpack会利用新版本中的一些特性 ...

  4. 理解ES6中的Symbol

    一.为什么ES6引入Symbol 有时候我们在项目开发的过程中可能会遇到这样的问题,我写了一个对象,而另外的同时则在这个对象里面添加了一个属性或是方法,倘若添加的这个属性或是方法是原本的对象中本来就有 ...

  5. webpack3配置字体图标和打包相关问题

    webpak配置字体图标有两种方式 一.将字体图标和css打包到同一个文件中. 1.首先需要安装url-loader npm install --save-dev url-loader 2.相关配置如 ...

  6. vue-cli webpack3扩展多模块打包

    场景 在实际的项目开发中会出现这样的场景,项目中需要多个模块(单页或者多页应用)配合使用的情况,而vue-cli默认只提供了单入口打包,所以就想到对vue-cli进行扩展 实现 首先得知道webpac ...

  7. vue-cli项目打包优化(webpack3.0)

    1.修改source-map配置:此配置能大大减少打包后文件体积. a.首先修改 /config/index.js 文件: // /config/index.js dev环境:devtool: 'ev ...

  8. webpack3新特性介绍

    6月20号webpack推出了3.0版本,官方也发布了公告.根据公告介绍,webpack团队将未来版本的改动聚焦在社区提出的功能需求,同时将保持一个快速.稳定的发布节奏.本文主要依据公告内容,简单介绍 ...

  9. webpack3中文版使用参考文档--全面解析webpack.config.js

    Webpack目前官方发布的最新版本是3.1.0,相对于2.0的怎么本,在语法上没有变动,只是新增了功能.使用webpack,需要事先安装node.js,并对node.js生态有一些基本的了解,比如( ...

随机推荐

  1. MacPorts镜像

    /opt/local/etc/macports/macports.conf: rsync_server pek.cn.rsync.macports.org rsync_dir macports/rel ...

  2. 如何将redis加入到Windows 服务中

    将redis加入到Windows 服务的方法 原文出自:https://www.cnblogs.com/zoro-zero/p/5761507.html, 本文稍作完善 1.下载zip的Redis,对 ...

  3. oracle字段like多个条件

    写oracle sql时有时候会有 and (字段 like ‘匹配串1’or 字段 like ‘匹配串2’or ...)这样的情况出现,下面提供一个简洁点的解决方案: and REGEXP_LIKE ...

  4. shell初级-----结构化命令

    if-then语句 bash shell的if语句会执行if后面的那个命令,如果该命令的退出码状态为0会执行then部分的命令,如果是其他值不会执行. 格式如下: if command then co ...

  5. leetcode 17电话号码的字母组合

    与子集70?类似,子集每次两个分支,本题每次k个分支,子集是第一次不push第二次push元素,本题是每次都push元素,因此,本题答案的长度都为k,子集题目为各种组合: /** res,level, ...

  6. MEF引起的内存泄露

    也许你编程的时候很小心,注意不引起内存泄露,例如不要被全局Static的变量引用上,注意Singleton的static引用,注意Event Handler注销,注意IDisposable接口实现,而 ...

  7. 无法在WEB服务器上启动调试,Web 服务器配置不正确

    访问IIS元数据库失败 思考可能是次序出了问题,解决 1.打开CMD,进入 C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727 2.输入 aspnet_regi ...

  8. tomcat gc和内存

    tomcat启动参数,将JVM GC信息写入tomcat_gc.log CATALINA_OPTS='-Xms512m -Xmx4096m -XX:PermSize=64M -XX:MaxNewSiz ...

  9. jenkins 配置 gitlab webhook 实现自动发布

    测试环境需要git提交代码后,Jenkins自动部署,需要gitlab配置project webhook. 1,Jenkins版本2.89  gitlab 8.11 2,Jenkins需要安装插件:G ...

  10. 【HANA系列】SAP HANA使用XS和HTTP创建proxy

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA使用XS和HTT ...