各位看官git上求个星星！ 我有趣的前端笔记！！（webpack，babel，typescript，手撕排序算法等持续更新中！！）
一、初步搭建
1、初始化package.json
yarn init -y
npm init -y
npm会比yarn多scripts 对象
作用：便捷指令
//package.json
{
"name": "demo1",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
//"test": "echo \"Error: no test specified\" && exit 1" //初始化生成
"build": "webpack" //webpack命令
},
"keywords": [],
"author": "",
"description": ""
}
2、安装webpack
使用开发者依赖即可
yarn add -D webpack webpack-cli
3、初步实现配置
0、根目录下 创建webpack.config.js
1、实现打包文件 自动生成html 并会在html中导入
- 安装 html-webpack-plugin 包
- webpack.config.js 导入包+plugins新建实例
2、入口文件设置输出
- 利用entry设置文件对应打包后的文件名
entry:{ index:'./src/index.js', home:'./src/home.js', page:'./src/page.js' }
- 利用output重构打包后的文件名
//会重新构成打包后的文件名 //[name] 对应上面entry的key值 //[hash] 随机生成的hash值 :8 是剪切前6位 output:{ filename:'[name].[hash:8].js', //path控制输出文件夹的名字 [默认dist] path:path.join(__dirname,'release') //前提导入path模块 需要用绝对路径!! },
const path = require('path')
const HtmlWebpack = require('html-webpack-plugin')
module.exports = {
//1.编译打包模式[production/development]
mode: 'development',
//2.入口文件设置{换而言之=>要打包的文件} //多入口写法
entry: {
index: './src/index.js',
home: './src/home.js',
page: './src/page.js'
},
//3.出口文件设置{对打包好的文件格式化文件名+修改出口文件夹}
output: {
filename: '[name].[hash:8].js',
path:path.join(__dirname,'release')
},
//4.插件设置=>具体看文档 此处用到自动生成html
//html中自动导入打包好的js
//其中的template指向预定好的模板
plugins: [
new HtmlWebpack({
template:'./src/index.html'
})
]
}
二、进阶之loaders篇
1、样式
-
style-loader将模块的导出作为样式添加到 DOM 中 -
css-loader解析 CSS 文件后，使用 import 加载，并且返回 CSS 代码 -
less-loader加载和转译 LESS 文件 -
sass-loader加载和转译 SASS/SCSS 文件
在module中添加规则
module:{
rules:[
{
test:/\.(css|less|scss)$/,
use:['style-loader','css-loader','less-loader']
}
]
},
注意：要使用
less-loader需要先安装 less-loader和 less
补充：设置全局的颜色less，可在其他地方引用 @import xxx
//base.less
@primary-color:#ccc;
@background-color:#000;
//index.less
@import './base.less';
.haha{
color: @primary-color;
background-color:@background-color
}
2、如何build出对应的样式文件
需要安装对应插件从 bundle 中提取文本（CSS）到单独的文件
npm install --save-dev extract-text-webpack-plugin
将webpack.config.js的module修改一下
- 1、通过require引入该库
- 2、先在plugins中注册一份ExtractTextPlugin
- 3、将rules中每一项设置一个use
//1.引入该库
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports={
//...省略代码...
//2.在plugins中注册一份ExtractTextPlugin
plugins: [
new ExtractTextPlugin("style.css")
],
module:{
//3.将rules中每一项设置一个use
//通过ExtractTextPlugin的extract-api 去指定loader
rules:[
{
test:/\.css$/,
use:ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
},
{
test:/\.less$/,
// use:['style-loader','css-loader','less-loader']
use:ExtractTextPlugin.extract({
fallback: 'style-loader',
//如果需要，可以在 sass-loader 之前将 resolve-url-loader 链接进来
use: ['css-loader','less-loader']
})
}
]
}
}
补充 ：可能会报错DeprecationWarning: Tapable.plugin is deprecated. Use new API on '.hooks' instead
此处只需将版本更新即可 npm install extract-text-webpack-plugin@next
3、webpack转换typescript
1、常规转换typescript方式
- 通过全局安装 tsc
- 在通过tsc编译ts文件 此时会在ts文件夹下 生成转换后的js文件
//全局安装 tsc
npm install -g tsc
//tsc编译
tsc xxx.ts
2、webpack方式转换typescript
- 安装ts-loader 和 typescript
yarn add -D ts-loader typescript
- 修改webpack.config.js文件下的module
module:{
rules:[
{
test:/\.ts$/,
loader:'ts-loader'
}
]
}
- 添加一个 在根目录下
tsconfig.json文件 【固定写死】
{
"compilerOptions": {
"sourceMap": true
}
}
三、进阶之 热部署
1、 概念：
它允许在运行开发时更新各种模块，而无需进行完全刷新。
换而言之：修改js，vue保存后，即可自动编译+刷新页面 无需重新手动编译
2、热部署方式（1）
- 引入 webpack
const webpack = require('webpack');- 增加devServer项 【固定！】
- plugins加入插件
new webpack.HotModuleReplacementPlugin()
const HtmlWebpack = require('html-webpack-plugin')
+ const webpack = require('webpack');
module.exports = {
entry:{
index:'./src/index.js'
},
mode:'development',
+ devServer:{
+ contentBase:'./dist',
+ hot:true
+ },
plugins:[
+ new webpack.HotModuleReplacementPlugin(), //需要在上方导入webpack
new HtmlWebpack({
title:'hot module',
template:"./src/index.html"
})
]
}
修改package.json 的 指令
- 安装 热部署的库
npm install -D webpack-dev-server- 在scripts中添加dev指令 即运行
webpack-dev-server
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server"
},
注意❌：修改html并不能使用热部署！！ 因为html并没有放在webpack.config.js文件中打包
3、热部署方式（2）
此处放置通过 Node.js API官网链接 实用起来感觉没必要（东西太多+我懒~~）
四、开发和生产环境的不同配置方法
1、定义
开发环境：dev
生产环境：build
| 常用命令 | webpack.config.js | |
|---|---|---|
| 开发环境 | dev | mode:'development' |
| 生产环境 | build | mode:'production' |
2、同时配置方法
设置两个不同的
webpack.prod.config.js即可 注意 名字不能相同！！！
修改其中的 mode
-
开发环境下的mode =》mode:'development'
-
生产环境下的mode =》mode:'production'
修改package.json的命令入口文件
"scripts": {
"build": "webpack --config webpack.prod.config.js",
"dev": "webpack-dev-server --config webpack.config.js"
},
五、手动配置vue的webpack
1、安装vue包和对应的loader
npm install -D vue-loader vue vue-template-compiler
npm install -D babel-loader @babel/core
2、配置webpack.config.js
要想在vue中使用 less lang="less"
需要修改webpack.config.js
//webpack.config.js
const HtmlWebpack = require('html-webpack-plugin') //build生成html
const webpack = require('webpack')
+ const VueLoaderPlugin = require('vue-loader/lib/plugin') //vue的loader
module.exports = {
mode:'development',
entry:'./src/index.js',
//热部署
devServer:{
contentBase:'./dist',
hot:true
},
module: {
rules: [
+ {
+ test: /\.vue$/,
+ loader: 'vue-loader'
+ },
// 它会应用到普通的 `.js` 文件
// 以及 `.vue` 文件中的 `