webpack相关配置

cd 项目文件夹

npm init -y

npm install jquery -S //生成node_modules 下载好jquery

创建webpack.config.js

module.exports = {
entry: path.join(__dirname, './src/main.js'), //入口文件
output:{ //输出文件相关配置
path: path.join(__dirname, './dist'),
filename: 'bundle.js' //指定输出文件名称
}，
mode: 'development'
}

npm install webpack -D 本地安装一下
npm install webpack-dev-server -D 本地安装webpack-dev-server
npm install webpack-cli -D

配置

"dev": "webpack-dev-server --mode development --open --port 3000 --contentBase src --hot", //--open 自动打开浏览器 --port 3000 端口号3000 --contentBase src 修改默认打开目录 --hot热重载
"build": "webpack-dev-server --mode production"
//注意 model.exports 里 mode: 'developoment' 是否加上去

（htmlwebpackplugin）插件自动在内存中根据制定页面生成一个内存页面 自动把打包好的bundle.js追加到页面

npm install html-webpack-plugin -D
webpack.config.js 中追加
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
.
.
plugins: [
new htmlWebpackPlugin({
template: path.join(__dirname, './src/index.html'),
filename: 'index.html' //设置生成的内存页面名称 不是在磁盘 自动追加引用src
})
]
}

 

import './css/index.css'

// 如果需要处理css文件 需要安装npm install style-loader css-loader -D
// 打开webpack.conf.js 这个配置文件 在里面新增一个配置节点 叫做module 他是一个对象 有个rules 数组 存放了所有第三方文件匹配处理规则
module: {
rules: [
{
test: /\.css$/, use: ['style-loader','css-loader'] //test 正则匹配 /\.css$/ $结尾 .需要转义 类似replace(/好人/g,坏人) 匹配所有好人替换成坏人
}
]
}

import './css/index.less'

npm install less-loader -D
npm install less

module: {
rules: [
{
test: /\.css$/, use: ['style-loader','css-loader'],
},
{
test: /\.less$/, use: ['style-loader','css-loader','less-loader']
}
]
}

 

webpack 无法处理css样式表url地址 ../ 图片地址 字体库 需要安装
npm install url-loader file-loader -D //file-loader 是url-loader内部依赖

module: {
rules: [
{
test: /\.css$/, use: ['style-loader','css-loader'],
},
{
test: /\.less$/, use: ['style-loader','css-loader','less-loader']
},
{
test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' //处理图片路径的loader 图片小于limit字节的话处理成base64的 如果图片大于等于limit显示完整图片name=[name] 名字不变不处理 hash值
},
{
test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' //处理字体文件
},
]
}

静态属性 通过类名直接访问
es6

class Person {
static info = { name: 'zs', age:20}
}

function Animal(name){
this.name = name
}
Animal.info = 123

通过babel可以帮我们将高级语法转换为 低级的语法
①在webpack中，可以运行如下两套命令 安装两套包，去安装babel相关的loader 功能 第一套：转化成低级语法，第二套：语法对应关系
第一套包 npm install babel-core babel-loader babel-plugin-transform-runtime -D
第二套包 npm install babel-preset-env babel-preset-stage-0 -D
②打开webpack的配置文件在module节点下的rules数组中添加新的匹配规则
{
test:/\.js$/, use: 'babel-loader', exclude: /node_modules/
}
// 只需要转换自己写的 不需要转化node_modules中的js文件
// 如果不排除 node_modules ，则babel会把mode_modules中所有第三方js文件都打包编译 而且项目还会无法正常运行
③在项目的根目录中 ，新建一个叫做 .babelrc 的babel配置文件这个配置文件属于JSON格式 不能写注释 字符串双引号
在.babelrc写如下配置：
{
"presets": ["env", "stage-0"],
"plugins": ["transform-runtime"]
}

 

转载于:https://www.cnblogs.com/suanmei/p/9570998.html