webpack3 打包
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 脚本对象增加配置属性:
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
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.相关文章
webpack3 打包的更多相关文章
- element-ui和npm、webpack、vue-cli搭建Vue项目
一.element-ui的简单使用 1.安装 1. npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i element-ui -S 2. CDN ...
- vue学习之webpack
本质上,Webpack是一个现代 JavaScript应用程序的静态模块打包器(module bundler).当 Webpack处理应用程序时,它会递归地构建一个依赖关系图(dependency g ...
- webpack的正确安装方式
webpack是基于node开发的模块打包工具,所以他本质上是由node实现的. 我们要保持node版本尽量的新,另一个要保持webpack版本尽量的新,高版本的webpack会利用新版本中的一些特性 ...
- 理解ES6中的Symbol
一.为什么ES6引入Symbol 有时候我们在项目开发的过程中可能会遇到这样的问题,我写了一个对象,而另外的同时则在这个对象里面添加了一个属性或是方法,倘若添加的这个属性或是方法是原本的对象中本来就有 ...
- webpack3配置字体图标和打包相关问题
webpak配置字体图标有两种方式 一.将字体图标和css打包到同一个文件中. 1.首先需要安装url-loader npm install --save-dev url-loader 2.相关配置如 ...
- vue-cli webpack3扩展多模块打包
场景 在实际的项目开发中会出现这样的场景,项目中需要多个模块(单页或者多页应用)配合使用的情况,而vue-cli默认只提供了单入口打包,所以就想到对vue-cli进行扩展 实现 首先得知道webpac ...
- vue-cli项目打包优化(webpack3.0)
1.修改source-map配置:此配置能大大减少打包后文件体积. a.首先修改 /config/index.js 文件: // /config/index.js dev环境:devtool: 'ev ...
- webpack3新特性介绍
6月20号webpack推出了3.0版本,官方也发布了公告.根据公告介绍,webpack团队将未来版本的改动聚焦在社区提出的功能需求,同时将保持一个快速.稳定的发布节奏.本文主要依据公告内容,简单介绍 ...
- webpack3中文版使用参考文档--全面解析webpack.config.js
Webpack目前官方发布的最新版本是3.1.0,相对于2.0的怎么本,在语法上没有变动,只是新增了功能.使用webpack,需要事先安装node.js,并对node.js生态有一些基本的了解,比如( ...
随机推荐
- MacPorts镜像
/opt/local/etc/macports/macports.conf: rsync_server pek.cn.rsync.macports.org rsync_dir macports/rel ...
- 如何将redis加入到Windows 服务中
将redis加入到Windows 服务的方法 原文出自:https://www.cnblogs.com/zoro-zero/p/5761507.html, 本文稍作完善 1.下载zip的Redis,对 ...
- oracle字段like多个条件
写oracle sql时有时候会有 and (字段 like ‘匹配串1’or 字段 like ‘匹配串2’or ...)这样的情况出现,下面提供一个简洁点的解决方案: and REGEXP_LIKE ...
- shell初级-----结构化命令
if-then语句 bash shell的if语句会执行if后面的那个命令,如果该命令的退出码状态为0会执行then部分的命令,如果是其他值不会执行. 格式如下: if command then co ...
- leetcode 17电话号码的字母组合
与子集70?类似,子集每次两个分支,本题每次k个分支,子集是第一次不push第二次push元素,本题是每次都push元素,因此,本题答案的长度都为k,子集题目为各种组合: /** res,level, ...
- MEF引起的内存泄露
也许你编程的时候很小心,注意不引起内存泄露,例如不要被全局Static的变量引用上,注意Singleton的static引用,注意Event Handler注销,注意IDisposable接口实现,而 ...
- 无法在WEB服务器上启动调试,Web 服务器配置不正确
访问IIS元数据库失败 思考可能是次序出了问题,解决 1.打开CMD,进入 C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727 2.输入 aspnet_regi ...
- tomcat gc和内存
tomcat启动参数,将JVM GC信息写入tomcat_gc.log CATALINA_OPTS='-Xms512m -Xmx4096m -XX:PermSize=64M -XX:MaxNewSiz ...
- jenkins 配置 gitlab webhook 实现自动发布
测试环境需要git提交代码后,Jenkins自动部署,需要gitlab配置project webhook. 1,Jenkins版本2.89 gitlab 8.11 2,Jenkins需要安装插件:G ...
- 【HANA系列】SAP HANA使用XS和HTTP创建proxy
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA使用XS和HTT ...