版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
webpackStudy文件，学习笔记写在最后面
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>首页</title>
<!-- 这里不推荐直接引用任何包和css文件，应到main.js引入，然后这里只引main.js即可 -->
<!-- <script src="../dist/main.js"></script> -->
<!-- 但原main.js有ES6语法，用webpack处理后的文件在dist中 -->
<!-- <script src="../dist/bundle.js"></script> -->
<!-- 但用了html-webpack-plugin插件后，不需要手动处理bundle.js了，因为该插件会隐形创建一个script并引用正确路径的bundle.js -->
<!-- <script src="/bundle.js"></script> -->
<!-- 这次通过 cnpm i bootstrap -S 安装bootstrap -->
</head>
<body>
<ul>
<li>第1个li</li>
<li>第2个li</li>
<li>第3个li</li>
<li>第4个li</li>
<li>第5个li</li>
</ul>
<div class="box"></div>
<p>
boostrap图标<span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
</p>
</body>
</html>
main.js
// 此main.js是项目的JS入口文件
// 导入node_modules中的Jquery包
// import X from XX 是ES6导入模块的方式。 类似于node中const X = require('X')
// 但ES6语法有的浏览器解析不了，所以要先用webpack做中间处理
import $ from 'jquery'
// 导入css样式表
// webpack默认只能打包处理JS类型的文件，处理非JS文件要安装第三方loader加载器
// 1.打包css文件要安装 $ cnpm i style-loader css-loader -D
// 2.在webpack.config.js中配置节点 module
import './css/index.css'
// 处理less文件要安装less-loader. $ cnpm i less-loader -D
// less-loader依赖less $ cnpm i less -D
import './css/index.less'
// 处理scss文件要装 $ cnpm i sass-loader -D 依赖安装 $ cnpm i node-sass -D
import './css/index.scss'
import 'bootstrap/dist/css/bootstrap.css'
$(function(){
// 首页列表隔行变色
$('li:even').css('background','pink')
// $('li:even').css('background',function(){
// return '#999'
// })
})
// es5中构造函数写法
// function Student(name){
// this.name = name;
// }
// var stu = new Student('lxq');
// ES6中构造函数写法，实现面向对象
class Student{
// static可定义静态属性，即可以直接通过类名访问的属性，如Student.info
static info = { name:'lxq', age:22 }
}
console.log(Student.info);
// 1.webpack只能处理ES6的部分语法，更高级的ES6/7语法需借助第三方loader如Babel,转换为低级语法
// 安装Babel的两套命令：
// (1) $ cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
// (2) $ cnpm i babel-preset-env babel-preset-stage-0 -D
// 2.然后在webpack.config.js的 module 节点的 rules 中添加规则：
// { test:/\.js$/, use:'babel-loader', exclude:/node_modules/ }
// 3.在项目根目录新建 .babelrc 的Babel配置文件
// {
// "presets":["env", "stage-0"],
// "plugins":["transform-runtime"]
// }
// 如果以上操作后执行npm run dev报错提示需要babel-loader@7，则执行
// $ cnpm i babel-loader@7 -D
webpack.config.js
// 导入path路径模块
const path = require('path')
const webpack = require('webpack')
// 导入能在内存中生成HTML页面的插件，只要是插件都要放到plugins节点中
const htmlWebpackPlugin = require('html-webpack-plugin')
// 向外公开的配置对象
module.exports = {
// 入口文件，表示要用webpack打包的文件
entry: path.join(__dirname, './src/main.js'),
// 出口文件配置，指定打包后的文件存放目录
output:{
path: path.join(__dirname, './dist'),
filename: 'bundle.js'
},
// 这是配置 webpack-dev-server命令参数的另一种方式
devServer:{
open:true,
port:3000,
// contentBase:'src',
hot:true
},
// 配置插件的节点
plugins:[
new webpack.HotModuleReplacementPlugin(), //new一个热更新的模块对象
new htmlWebpackPlugin({ //创建一个在内存中生成HTML页面的插件
template: path.join(__dirname, './src/index.html'), //指定模板页面
filename: 'index.html' //指定生成的页面(复制)
})
],
// 配置所有的第三方模块加载器
module:{
// 所有第三方模块的匹配规则
rules:[
{test: /\.css$/, use:['style-loader','css-loader']}, //配置处理.css文件的loader规则
{test: /\.less$/, use:['style-loader', 'css-loader', 'less-loader']},
{test: /\.scss$/, use:['style-loader', 'css-loader','sass-loader']}, //配置处理.scss文件
// 处理图片文件路径的loader，参数limit是给定的大小
{test: /\.(jpg|png|gif|bmp|jpeg)$/, use:'url-loader?limit=7631&name=[hash:8]-[name].[ext]'},
{test: /\.(ttf|eot|svg|woff|woff2)$/, use:'url-loader'},
// 配置Babel，转换高级的ES6语法
{test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
]
}
}
package.json
{
"name": "webpackStudy",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"//": "注释：webpack-dev-server配置命令的第2方式：其他参数放到webpack.config.js",
"dev": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"bootstrap": "^3.4.1",
"jquery": "^3.4.1",
"popper.js": "^1.14.7"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^3.2.0",
"file-loader": "^4.2.0",
"html-webpack-plugin": "^3.2.0",
"less": "^3.10.3",
"less-loader": "^5.0.0",
"node-sass": "^4.13.0",
"sass-loader": "^8.0.0",
"style-loader": "^1.0.0",
"url-loader": "^2.2.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.9.0"
},
"description": ""
}
笔记.md
其他重点学习文件：webpack.config.js、 main.js、 package.json
<!-- webpack基于node -->
<!-- webpack作用：1.处理JS文件的互相依赖关系 2.处理JS的浏览器兼容问题-->
<!-- 初始化加package.json文件 -->
$ npm init -y
<!-- 初始化node_modules，导入jquery模块包 -->
$ npm i jquery -S
<!-- 用webpack给src\main.js做中间处理，转换文件放到dist下和bundle.js同级
命令格式如： webpack 原文件路径 新文件路径 -->
$ webpack .\src\main.js .\dist\bundle.js
<!-- 如果不想每次都写转换命令，可用配置文件webpack.config.js设置,执行命令时用'webpack'即可 -->
<!-- 用 webpack-dev-server 工具，可实现自动打包编译 -->
<!-- 安装到项目的本地开发依赖-->
$ npm i webpack-dev-server -D
<!-- webpack-dev-server工具要求本地项目中也安装webpack -->
$ cnpm i webpack -D
<!-- 因webpack3、4版本不同，如果cnpm i webpack -D不行，再尝试 -->
$ cnpm i -D webpack-cli
webpack-dev-server在package.js的设置
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
webpack默认无法处理css文件中的url地址，应安装url-loader处理(它依赖file-loader)
$ cnpm i url-loader file-loader -D
<!-- 用webpack安装boostrap包,现BS已到了版本4 -->
$ cnpm i bootstrap -S
<!-- 由于BS4.x版本icon文件分离出去,还需下载open-iconic。如果想直接用BS3可指定安装
-->
$ cnpm i bootstrap@3 -S
json文件中不能写注释,字符串必用双引号，重要的注释可用：
"//": "注释内容"
<!-- webpack引入Vue包，安装为运行依赖 -->
$ npm i vue -S
如果已删除node_modules要重装，可清除缓存 $ npm cache clean --force 后再 $ npm install 或 $ cnpm i
【 webpack2.4.*集成[email protected]报错？
官方文档 "https://vue-loader.vuejs.org/migrating.html#a-plugin-is-now-required"。Vue-loader在15.*后版本的使用都需要配合 VueLoaderPlugin
解决方法：在webpack.config.js中加入
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
// ...
plugins: [
new VueLoaderPlugin()
]
}
】
举例总结：webpack中如何使用vue？
1.安装vue包: cnpm i vue -S
2.安装能解析.vue组件的loader: cnpm i vue-loader vue-template-complier -D
3.main.js中导入vue模块： import Vue from 'vue'
4.定义.vue后缀组件(单文件组件包含template、script、style)
5.导入组件： import login from './login.vue'
6.创建vm实例，用render方法返回组件去渲染
【webpack中用 vue-router】
若导入组件后，页面渲染的组件不显示也没报错，检查以下是否拼写错误，特别是routes
var router = new VueRouter({
routes: [ // 注意是routes！
{path:'/', component: app}
]
})
// ES6中
// 1.导入模块【import 模块名称 from '模块标识符'】
// 2.导入样式【import '路径'】
// 3.用 export default 和 export 向外公布成员。
// 在一个模块中，export default只允许向外暴露1次，而export可暴露多个成员
// 可在一个模块中同时使用export default和 export 暴露成员。
export default{
name: 'zs',
age: 22
}
//但使用export暴露的成员，只能用 {原成员名} 来接收，这叫按需导出
export var title = '小淇淇';
export var content = '非常棒';
// Node中
// 1.导入模块【var 模块名称 = require '模块标识符'】
// 2.公布成员用 module.exports 和 exports