关于webpack打包的一些问题以及相关命令操作

webpack项目构建/打包工具
提供有好的模块化功能，代码压缩混淆，处理js兼容问题，优化性能
1 新建项目，运行npm init -y,初始化配置文件package.json
2 新建src源代码文件
3 新建src -> index.html首页
4 初始化基本结构
5 运行npm install jquery -s,安装jQuery

1 运行npm install webpack webpack-cli -D 命令，安装相关包
2 在根目录创建名为webpack.config.js的wp配置文件
3 配置文件中初始化以下：
module.exports = {
mode:‘development(开发模式)’ //指定构建模式
}
4 在package.json的scripts节点下新增dev脚本：
“scripts”:{
“dev”:“webpack” //使其可通过npm run执行
}
5 在终端执行 npm run dev

webpack自动打包：
1 npm i webpack-dev-server -D
2 修改package.json->scripts中的dev命令
3 运行npm run dev重新打包
4 访问浏览器验证

自动访问文件：
1 在package.json中配置如下:
“scripts”:{
“dev”:“webpack-dev-server --open --host 127.0.0.1 8888”
}
//修改配置文件后必须打包！！！！

通过loader打包非js模块
webpack只能默认打包.js后缀文件，需要调用loader加载器在可以调用其他
less-loader
sass-loader
url-loader
postcss-loader 浏览器兼容配置

webpack打包图片等文件问题：
1 cnpm i url-loader file-loader -D
2 在rules数组中添加：

module:{
rules:[
{
test:/.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
use:‘url-loader?limit=16940’ //只有小于limit，才能被转为base64图像
}
]
}

打包处理js高级语法
1 安装babel转换器： cnpm i babel-loader @babel/core @babel/runtime -D
2 安装babel语法相关包: cnpm i @babel/preset-env @babel/plugin-transform-runtime
@babel/plugin-proposal-class-properties -D
3 在项目根目录下创建babel配置文件babel.config.js并初始化如下：
module.exports = {
presets:{’@babel/preset-env’},
plugins:{’@babel/plugin-transform-runtime’,’@babel/plugin-proposal-class-properties’}
}
4 在webpack.config.js的rules数组中，添加loader规则如下：
{test:/.js$/,use:‘babel-loader’,exclude:/node_modules/}

webpack中配置Vue组件加载器：
1 cnpm i vue-loader vue-template-compiler -D
2 在webpack.config.js配置文件中添加vue-loader配置项
const VueLoaderPlugin = require(‘vue-loader/lib/plugin’)
rules:[
{test:/.vue$/,loader:‘vue-loader’}
]
},
plugins:[
//…其他插件
new VueLoaderPlugin()
]

//自动打包package.json “build”:“webpack -p”

vue脚手架：npm i -g @vue/cli

安装Element-ui的基本使用：
1 cnpm i element-ui -S
2 导入Element-ui 相关资源

在index.js中引入即可
import ElementUI from ‘element-ui’
import ‘element-ui/lib/theme-chalk/index.css’
配置Vue插件,在index.js中
Vue.use(ElementUI)

index.js

import $ from 'jquery'
import './css/1.css'
import './css/1.less'
import './css/1.scss'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

$(function(){
    $('li:odd').css('backgroundColor','yellow')
})

//webpack无法打包js高级语法，故需要安装包
/*class fuck{
static aa = 'shit'
}

console.log(fuck.aa)*/

//-------------------------------------

import Vue from 'vue'
import App from './component/App.vue'

const vm = new Vue({
    el:'#app',
    render:h=>h(App)
})

webpack.config.js

//如果要修改打包入口和出口，可以在webpack.config.js中新增entry/output
const path = require('path')    //打包路径
const HtmlWebpackPlugin = require('html-webpack-plugin')   //预览首页
htmlPlugin = new HtmlWebpackPlugin({    //实例化模板页面插件
    template:'./src/webpack.html',  // 模板页面
    filename:'index.html'   //生成页面
})

//组件加载器
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    mode:"development",
    entry:path.join(__dirname,'./src/index.js'),
    output:{
    path:path.join(__dirname,'./dist'),
    filename:'bundle.js'
    },
    plugins:[htmlPlugin,new VueLoaderPlugin()],   //此数组装入打包期间用到的的一些插件
    module:{
        rules:[
            {test: /\.css$/,use:['style-loader','css-loader','postcss-loader']},  
            {test: /\.less$/,use:['style-loader','css-loader','less-loader']},
            {test: /\.scss$/,use:['style-loader','css-loader','sass-loader']},
            {test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
             use:'url-loader?limit=16940'         
             //只有小于limit，才能被转为base64图像
            },
            {test:/\.vue$/,loader:'vue-loader'}
            // js加载出错
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/}      
        ]
    }
}