1.Webpack的基本使用
//1.全局安装webpack
//npm install webpack@4.27.1 -g
//npm i webpack-cli@3.1.2 -g
//npm info webpack
//webpack -v
//npm root -g //查看全局安装路径
//1.创建一个目录
//2.在目录下使用 npm init -y 生成package.json
//3.在项目目录下安装jquery npm install jquery –save
//4.写一个main.js 作为我们项目的入口文件
//main.js作为项目的入口文件
//我们可以在该文件中引入项目所用到的所有资源
import $ from ‘jquery’;
KaTeX parse error: Expected '}', got 'EOF' at end of input: …unction(){ (“li:odd”).css(“backgroundColor”,“yellow”);
$(“li:even”).css(“backgroundColor”,“green”);
})
//5.输入命令
webpack ./src/main.js -o ./dist/bundle.js
//6.将打包后的bundle.js引入到html文件中
2.webpack.config.js的基本使用
//1.在项目根目录下创建一个文件，名字叫webpack.config.js
//路径操作的模块
var path = require(“path”);
//使用的是CommonJS的规范
module.exports = {
//指定项目的入口
entry:path.resolve(__dirname,‘src/main.js’),
//指定打包后的文件位置和以及文件名
output:{
path:path.resolve(__dirname,‘dist’),
filename:‘bundle.js’
}
}
//2.直接输入webpack命令进行打包
3.项目实时打包构建
//1.在项目中安装webpack-dev-server和webpack和webpack-cli
npm i webpack-dev-server@3.1.9 --save-dev
npm i webpack@4.27.1 --save-dev //项目中安装webpack
npm i webpack-cli@3.1.2 --save-dev
//2.修改index.html中bundle.js的引入
script src="…/bundle.js">
//3.修改package.json中的script
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
“dev”: “webpack-dev-server --open --port 3000 --hot --contentBase src”
},
//4.在webpack.config.js中新增了mode的配置
module.exports = {
mode:“development”,
//5.使用npm run dev来构建了
// --open含义：构建完成自动打开浏览器
// --port 3001 : 指定运行的端口
// --contentBase src : 指定运行的根目录是src，即认为src就是项目根目录
// --hot : 热更新，是指当你对代码修改并保存后，webpack将会对代码进行重新打包，并将改动的模块发送到浏览器端，浏览器用新的模块替换掉旧的模块，去实现局部更新页面而非整体刷新页面。
注意点: webpack-dev-server在打包的时候，并没有把打包后的文件放入到磁盘中，而是把打包后的bundle.js放到内容中(位于项目根路径下)
//6.使用配置方式来写webpack-dev-server
//6.1 修改webpack.config.js文件
//路径操作的模块
var path = require(“path”);
//开启热更新第二步
var webpack = require(“webpack”);
//使用的是CommonJS的规范
module.exports = {
mode: “development”,
//指定项目的入口
entry: path.resolve(__dirname, ‘src/main.js’),
//指定打包后的文件位置和以及文件名
output: {
path: path.resolve(__dirname, ‘dist’),
filename: ‘bundle.js’
},
devServer: {
open: true,
port: 3000,
contentBase: “src”,
//开启热更新第一步
hot: true
},
//开启热更新的第三步
plugins: [
new webpack.HotModuleReplacementPlugin(), // new 一个热更新的 模块对象， 这是 启用热更新的第 3 步
]
}
//6.2 修改package.json
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
“dev”: “webpack-dev-server”
},
npm i webpack-cli@3.1.2 --save 安装生产环境的依赖 dependencies
npm i webpack-cli@3.1.2 --save-dev 安装开发环境的依赖 devDependencies
npm i webpack-cli@3.1.2 -g 全局安装
“dependencies”: {
“jquery”: “^3.4.1”
},
“devDependencies”: {
“webpack”: “^4.27.1”,
“webpack-cli”: “^3.1.2”,
“webpack-dev-server”: “^3.1.9”
}
4.html-webpack-plugin插件的使用
//1.安装插件
npm i html-webpack-plugin@3.2.0 --save-dev
//2.在webpack.config.js中添加配置
//引入安装html-webpack-plugin插件
const HtmlWebpackPlugin = require(‘html-webpack-plugin’)
//开启热更新的第三步
plugins: [
new webpack.HotModuleReplacementPlugin(), // new 一个热更新的 模块对象， 这是 启用热更新的第 3 步
//HtmlWebpackPlugin 可以帮我们把html配置到内存中，并且自动注入打包后的bundle.js
new HtmlWebpackPlugin({
//指定要处理哪个html文件
template:path.resolve(__dirname,“src/index.html”),
//指定内存中的html文件的名字
filename:“index.html”
})
]
6.加载css文件
//1.安装css的加载器
npm i style-loader css-loader --save-dev
//2.修改webpack.config.js
module: {
rules: [
/配置css文件的加载器/
{
test: /.css$/,
use: [‘style-loader’, ‘css-loader’]
}
]
}
//3.在main.js中引入对应的css样式资源了
7.使用less、sass
npm i less-loader less --save
npm i sass-loader@7.3.1 node-sass --save-dev
修改webpack.config.js文件
rules: [
/配置css文件的加载器/
{
test: /.cssKaTeX parse error: Expected 'EOF', got '}' at position 68: …'] }̲, {…/,
use: [‘style-loader’, ‘css-loader’, ‘less-loader’]
},
{
test: /.scss$/,
use: [‘style-loader’, ‘css-loader’, ‘sass-loader’]
}
]
在main.js中就可以引入less和scss文件了
npm config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass
如果要使用sass，那么需要安装python
7.字体图标的使用
npm i url-loader file-loader --save-dev
{
test: /.(ttf|eot|svg|woff|woff2)$/,
use: [
{
loader: ‘url-loader’
}
]
},
- css中图片路径的问题
{
test: /.(png|jpg|gif|bmp|jpeg)$/,
use: [
{
loader: ‘url-loader’,
options: {
//如果图片小于8kb，就使用base64编码
//如果图片大于8kb，就给图片重新去个名字
limit: 8192,
name: ‘[hash:8]-[name].[ext]’
}
}
]
}
9.babel的使用
npm i babel-core@6.26.3 babel-loader@7.1.5 babel-plugin-transform-runtime --save-dev
npm i babel-preset-env babel-preset-stage-0 --save-dev
修改webpack.config.js文件
{
test: /.js$/,
use: [‘babel-loader’],
exclude: /node_modules/
}
在项目根目录下创建一个.babelrc文件
{
“presets”: [
“env”,
“stage-0”
],
“plugins”: [
“transform-runtime”
]
}
10.vue结合webpack的使用
//1.将之前项目 package.json package-lock.json webpack.config.js .babelrc 四个文件拷贝到新项目中去
//2.在新项目中npm install 装包
//3.在项目安装vue npm install vue@2.6.11 --save
//4.修改webpack.config.js配置
resolve: {
alias: {
‘vue$’: ‘vue/dist/vue.js’
}
},
//5.就可以在main.js中使用vue的基本语法了
- .vue文件的使用
1.在vscode中安装vetur插件，可以帮我们格式化vue文件的代码，有一些智能提示功能
2.安装vue-loader以及vue-template-compiler (注意版本号的问题)
npm i vue-loader@15.4.2 vue-template-compiler@2.6.11
3.修改webpack.config.js配置文件，添加vue的插件和加载器
plugins: [
new webpack.HotModuleReplacementPlugin(), // new 一个热更新的 模块对象， 这是 启用热更新的第 3 步
//HtmlWebpackPlugin 可以帮我们把html配置到内存中，并且自动注入打包后的bundle.js
new HtmlWebpackPlugin({
//指定要处理哪个html文件
template: path.resolve(__dirname, “src/index.html”),
//指定内存中的html文件的名字
filename: “index.html”
}),
//配置VueLoaderPlugin插件
new VueLoaderPlugin()
],
{
test: /.vue$/,
use: [‘vue-loader’]
}
4.我们就可以创建.vue文件了，可以在main.js中引入.vue文件了
12.es6模块化规范
//1.模块的导出
var kk = {
title:“祖国你好”
};
export default kk; //导出默认的数据
//导出默认数据 只能导出一个
//导出其他数据，可以导出很多个
export var name = “张三”;
export var age = 18;
//2.模块的引入
//引入模块
//如果引入的是export default方式导出的，则不需要加{}，而且变量名字任意
//如果引入的是export方式导出的，则需要加{}，而且变量名字必须和之前导出的名字一致。如果想不一致，我们可以通过as的方式取别名
import kk2, { name as name1, age } from ‘./test’
console.log(kk2);
console.log(name1, age)
13.组件的数据、事件和样式
扫一扫
2801
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
