webpack基础知识

===================================================================

域名org结尾一般是非盈利组织
com结尾一般是盈利组织

修改配置文件可以直接修改，然后在后台使用npm install就可以

===================================================================
webpack的概述：

webpack与grunt/gulp的对比：

使用webpack打包：

webpack：./src/main.js 空格 ./dist/修改后的文件名

两种标准模块的导入：

//1、commonjs的模块化规范
const {add,mul}=require('./mathUnit.js')console.log(add(15,20));
console.log(mul(10,20));//2、ES6模块化规范
import {age, height, name} from "./info.js";
console.log(name);
console.log(age);
console.log(height);

配置局部webpack：

npm install webpack@3.6.0 --save-dev

要先生成webpack.config.js文件

const path=require('path')//‘path’是node里面的变量module.exports={entry:'./src/main.js',//入口output:{//出口要写成对象path:path.resolve(__dirname,'dist'),//_dirname是通过node里面自动获取绝对地址的变量名filename:'bundle.js'//文件名}
}

在package.json文件中配置脚本：
先要使用npm init创建package.json
假如有依赖文件再使用npm install创建package-lock.json

假如直接在终端上使用webpack的话会始终使用全局打包工具
所以要使用npm run 自定义名字
使用npm来打包可以优先使用局部打包工具

=============================================================================

引入其他文件进行转换时使用loader：

记得要先在入口文件依赖你所需要的文件：

//1、使用commomjs的模块化规范
const {add,mul}=require('./js/mathUnit.js')console.log(add(15,20));
console.log(mul(10,20));//2、使用ES6的模块化的规范
import {age, height, name} from "./js/info.js";console.log(name);
console.log(age);
console.log(height);//3、依赖css文件
require('./css/normal.css')

配置文件注意事项：

const path=require('path')module.exports={entry:'./src/main.js',output:{path:path.resolve(__dirname,'dist'),filename:'bundle.js'},module: {rules: [{test: /\.css$/,//正则表达式\.转义，$结尾，为了获取.css后缀的文件//css-loader只负责将css文件进行加载//style-loader负责将样式添加到DOM中//使用多个loader时，是从右向左！！！！！use: [{ loader: 'style-loader' },  {loader: 'css-loader',}]}]}
}

less文件的写法：

@fontSize:50px;
@fontColor:orange;body{font-size: @fontSize;color: @fontColor;
}

使用webpack打包less文件时出现以下问题，主要是原因是因为less-loader和webpack版本不兼容，我使用的是webpack@3.6.0，最新版本的less-loader@6.0.0只支持webpack@4.0以上。

==========================================================================

使用webpack打包图片：
！！！记得先用npm安装file-loader模块
配置文件的新增内容
看注释！！！

const path=require('path')module.exports={entry:'./src/main.js',output:{path:path.resolve(__dirname,'dist'),//__dirname绝对路径名，打包至distfilename:'bundle.js',publicPath:'dist/'//这个属性作用时为了可以调用url文件的时候会在前面加上dist/},module: {rules: [{test: /\.(png|jpg|gif)$/,use: [{loader: 'url-loader',options: {//当图片大小，小于limit时，会将图片编译为base64的字符串形式//当图片大小，大于limit时，会使用file-loader模块进行加载，要先用npm安装file-loaderlimit: 8196,//单位是字节name:"dist/[name].[hash:8].[ext]"//"dist/[获取原文件名].[保留哈希值8位].[获取原后缀名]"}}]}]}
}

=============================================================================

webpack-ES6转ES5的babel：

安装：npm install babel-loader@7 babel-core babel-preset-es2015
配置文件：

  {test: /\.js$/,exclude: /(node_modules|bower_components)/,//与include相反是排除的意思use: {loader: 'babel-loader',options: {presets: ['es2015']}}}

=============================================================================

webpack-使用vue的配置过程：

先用npm安装vuenpm install vue --save

在html上挂载{{message}}

//5、使用vue进行开发
const app=new vue({//真实开发中不需要赋值给appel:'#app',data:{message:'hello webpack'}})

在配置上要添加别名：否则会报错原因如下：

配置：

  resolve:{//alias:别名alias:{'vue$':'vue/dist/vue.esm.js'}}

然后再使用webpack打包就可以

假如vue代码中同时有el和template
会将el在html中的#id代码替换掉，换成template的代码

==============================================================================

使用vue组件进行分离式开发：

.vue文件：

<template><div><h2 class="title">{{message}}</h2><button @click="btnclick">按钮</button><h2>{{name}}</h2></div>
</template><script>
export default {name:"app",data(){return{message:"你好啊分离开发版",name:"吴小明"}},methods: {btnclick(){alert(this.name)}}
}
</script>
<style scoped>.title{color: blueviolet;}
</style>

main.js文件：

import vue from 'vue';
import app from './vue/app.vue';
//vue组件的注册
new vue({el:'#app',template:'<app/>',components:{app}})

要安装loader才能加载vue文件

要改配置里面的vue-loader版本到13不然要装插件

组件2的文件：

<template><div class="wrapper"><h2>{{message}}</h2><h2>{{age}}</h2></div>
</template><script>
export default {name:"Cpn",data(){return{message:"你好我是Cpn的message",age:"Cpn的age是18"}}}
</script><style scoped>
.wrapper{font-size: 20px;color: black;
}
</style>

1、要在组件1处进行注册
2、注册完在组件1的template处使用组件2的标签
3、形成组件树

组件1的script处代码

<script>
import Cpn from './Cpn.vue';//导入组件2
export default {name:"app",   components:{//注册组件2Cpn},data(){return{message:"你好啊分离开发版",name:"吴小明"}},methods: {btnclick(){alert(this.name)}}
}
</script>

==============================================================================

webpack关于横幅plugin（插件）的使用：

配置文件代码：

打包后的文件效果：

==============================================================================

webpack关于html-webpack-plugin的使用：

版本要装3.0.0之中的：否则不支持

配置信息：

const path=require('path')
const webpack=require('webpack')
const htmlwebpackplugin=require('html-webpack-plugin')//请求html-webpack-plugin插件
module.exports={entry:'./src/main.js',output:{},module: {rules: [{}]}plugins:[new webpack.BannerPlugin('最终版权归小羊所有'),new htmlwebpackplugin({template: 'index.html'//以这个文件为模板})]

============================================================================

webpack关于uglifyjs-webpack-plugin的使用：
压缩js文件----------开发阶段不需要，发布的时候才需要

const uglifyjsWebpackPlugin=require('uglifyjs-webpack-plugin')//请求插件module.exports={plugins:[new webpack.BannerPlugin('最终版权归小羊所有'),new htmlwebpackplugin({template: 'index.html'//以这个文件为模板}),new uglifyjsWebpackPlugin()//丑化文件配置]
}

============================================================================

webpack-dev-server搭建本地服务器： 发布的时候不要，开发的时候要
先安装： npm install webpack-dev-server@2.9.0 --save-dev
版本与脚手架二适配
配置信息：

  devServer:{contentBase:'./dist',inline:true}

json里面的script：
因为要在局部环境里面找

"dev":"webpack-dev-server --open"

==============================================================================

webpack配置的分离：

要安装webpack-merge

 npm install webpack-merge --save-dev

prod发布时候的配置文件：

const uglifyjsWebpackPlugin=require('uglifyjs-webpack-plugin')
const webpackmerge=require('webpack-merge')
const baseconfig=require('./base.config.js')
const htmlwebpackplugin=require('html-webpack-plugin')module.exports=webpackmerge(baseconfig,{//使用方法plugins:[ new htmlwebpackplugin({template: 'index.html'//以这个文件为模板}),new uglifyjsWebpackPlugin()]
})

dev的配置文件：

const webpackmerge=require('webpack-merge')
const baseconfig=require('./base.config.js')module.exports=webpackmerge(baseconfig,{devServer:{contentBase:'./dist',inline:true}
})

json里面的script：

  "scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack --config ./build/prod.config.js","dev": "webpack-dev-server --open --config ./build/dev.config.js"},

打包路径要改为上一层的文件：. ./dist

webpack基础知识相关推荐

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版（一）基础知识概述
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(一)基础知识概述前言 2016年,我写了一系列的 VUE 入门教程,当时写这一系列博文的时候,我也只是一个菜鸟 ...
JavaScript基础知识必知！
JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型. JS作用:表单验证,减轻服务端的压力:添加页面动画效果:动态更改页面内容:Ajax网络请求. 下面简单介 ...
npm重要基础知识总结
最新内容,请在github阅读 npm基础知识总结 1.我们的模块都会在系统下缓存 C:\Users\Administrator\AppData\Roaming\npm-cache\registry. ...
echarts结合react开发基础知识学习
echarts基础知识学习 1.echarts简介 ECharts,一个使用 JavaScript 实现的开源可视化库,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,S ...
【JS】1037- 面试前必备的 JavaScript 基础知识梳理总结
1. JavaScript简介 JavaScript 最开始是专门为浏览器设计的一门语言,但是现在也被用于很多其他的环境. 如今,JavaScript 已经成为了与 HTML/CSS 完全集成的,使用 ...
JavaScript 面试必备的基础知识梳理（71个知识点）
1. JavaScript简介 JavaScript 最开始是专门为浏览器设计的一门语言,但是现在也被用于很多其他的环境. 如今,JavaScript 已经成为了与 HTML/CSS 完全集成的,使用 ...
面试前必备的 JavaScript 基础知识梳理总结
1. JavaScript简介 JavaScript 最开始是专门为浏览器设计的一门语言,但是现在也被用于很多其他的环境. 如今,JavaScript 已经成为了与 HTML/CSS 完全集成的,使用 ...
webpack基础版及其常用插件分享超详细~~
webpack的作用打包.把多个文件打成个数更小的文件. 支持模块化优化: 代码压缩,加密掌握webpack的基本使用: 配置webpack.config.js 基本使用入口出口 loade ...
移动web开发入门—基础知识、自适应布局、调试
之前没做过移动端web开发,最近接手的一个小项目是做微信公众号,需要考虑手机适配.UI给出的设计稿是一般是基于iphone手机做的(15年之后是基于ipone6),我们的UI是基于iphone6来做的 ...

webpack基础知识

webpack基础知识相关推荐

最新文章

热门文章