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 规则

const path = require('path');

module.exports = {
entry: path.join(__dirname,'src/index.js'),
output:{
filename:'build.js',
path: path.join(__dirname,'dist')
},
module:{
rules:[
{
test:/\.vue$/,
loader:'vue-loader'
} ]
}
}

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

const path = require('path');

module.exports = {
entry: path.join(__dirname, 'src/index.js'),
output: {
filename: 'build.js',
path: path.join(__dirname, 'dist')
},
module: {
rules: [{
test: /\.vue$/,
loader: 'vue-loader'
}, {
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.styl$/,
use: [
'style-loader',
'css-loader',
'stylus-loader'
]
},
{
test: /\.(png|jpg|jpeg|gif|svg)$/,
use: [{
loader: 'url-loader',
options: {
limit: 1024,
name: '[name]-aaa.[ext]'
}
}]
} ]
}
}

index.js

import Vue from 'vue'
import App from './app.vue'
import './assets/images/bg.png'
import './assets/styles/test.css'
import './assets/styles/footer.styl' const root=document.createElement('div')
document.body.appendChild(root); new Vue({
render: h => h(App)
}).$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

const path = require('path');
const webpack = require("webpack")
const HTMLPlugin = require('html-webpack-plugin') //判断是否为测试环境,在启动脚本时设置的环境变量都是存在于process.env这个对象里面的
const isDev = process.env.NODE_ENV === "development" const config ={
target:'web',
entry: path.join(__dirname, 'src/index.js'),
output: {
filename: 'build.js',
path: path.join(__dirname, 'dist')
},
module: {
rules: [{
test: /\.vue$/,
loader: 'vue-loader'
}, {
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.styl$/,
use: [
'style-loader',
'css-loader',
'stylus-loader'
]
},
{
test: /\.(png|jpg|jpeg|gif|svg)$/,
use: [{
loader: 'url-loader',
options: {
limit: 1024,
name: '[name]-aaa.[ext]'
}
}]
} ]
},
plugins:[
new webpack.DefinePlugin({ //主要作用是在此处可以根据isdev配置process.env,一是可以在js代码中可以获取到process.env,
'process.env':{ //二是webpack或则vue等根据process.env如果是development,会给一些特殊的错误提醒等,而这些特殊项在正式环境是不需要的
NODE_ENV: isDev ? '"development"' : '"production"'
}
}),
new HTMLPlugin() //引入HTMLPlugin
] } if(isDev){
config.devtool = '#cheap-module-eval-source-map'
config.devServer = {
// port: 8000,
// host: '127.0.0.1',
port: 8700,
host: '0.0.0.0',
overlay: {
errors: true,
},
// open: true , //项目启动时,会默认帮你打开浏览器
hot: true //在单页面应用开发中,我们修改了代码后是整个页面都刷新,开启hot后,将只刷新对应的组件
},
config.plugins.push( //添加两个插件用于hot:true的配置
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
)
} module.exports = config

package.json

{
"name": "webpack3.0",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"cross-env": "^5.1.3",
"css-loader": "^0.28.7",
"file-loader": "^1.1.6",
"html-webpack-plugin": "^2.30.1",
"style-loader": "^0.19.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"url-loader": "^0.6.2",
"vue": "^2.5.13",
"vue-loader": "^13.6.0",
"vue-template-compiler": "^2.5.13",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.1"
}
}

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. PriorityQueue源码阅读

    最小堆:优先级权重越小 离顶点越近 案例 实现一个top max n publish static int[] topN(int[] nums, int l){ int[] result = new ...

  2. vue.js环境安装

    1.到官网(http://nodejs.cn/download/)下载Node.JS运行环境并安装(由于现在的Node中自带npm包管理器,所以就不需要额外下载npm了) 2.如果是新手,那么建议以引 ...

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

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

  4. 浏览器端-W3School-JavaScript-HTML DOM:HTML DOM Document 对象

    ylbtech-浏览器端-W3School-JavaScript-HTML DOM:HTML DOM Document 对象 1.返回顶部 1. HTML DOM Document 对象 Docume ...

  5. SVN 清理失败解决方案

    SVN有时因各种不明原因导致清理失败,可以采取如下解决办法进行处理: 方法一: 删除根目录下隐藏文件夹“.svn” 然后在根目录文件夹 外面的空白处 检出.比如你项目文件夹名为“D:/source” ...

  6. vsftp软件安装部署

    1.安装vsftp yum install -y vsftpd db4-utils2.默认可以支持系统用户账号远程登录.不安全,建立虚拟账号体系为好.或者在服务器端对vsftpd.conf配置文件进行 ...

  7. apache不记录指定类型的访问日志

    在虚拟主机配置文件中 添加如下内容使得.gif.png.bmp.js.css.swf,jpg,在指定访问日志后加上env=!image_request !取反即以上内容不显示在日志中. SetEnvI ...

  8. mesh重叠闪烁问题

    我用正交摄像机做了2d游戏,但是导出spine动画文件是个mesh ,在游戏里有时会出现2个Mesh来回切换显示顺序问题,导致闪烁 查了下并没有发现什么解决方案 后面突然发现只要将摄像机的Y轴偏移一点 ...

  9. 转·c语言函数指针的理解与使用

    原文出处:https://www.cnblogs.com/haore147/p/3647262.html 1.函数指针的定义 顾名思义,函数指针就是函数的指针.它是一个指针,指向一个函数.看例子: 1 ...

  10. Linux ulimit 命令 限制系统用户对 shell 资源的访问

    ulimit命令用来限制系统用户对 shell 资源的访问,常见用法如下: [root@MongoDB ~]# ulimit -a // 查看当前所有的资源限制 [root@MongoDB ~]# u ...