webpack学习

ES6模块化的语法学习

a、默认导出，使用export default 默认导出的成员
b、默认导入，import 接受名称 from ‘模块标识符’
c、按需导出，使用语法：export let s1=10，方法的语法：export function test =function {}
d、按需导入，使用语法：import {s1} from ‘模块标识符’

webpack的基本使用学习

a、新建空白项目，在根目录中运行 npm init -y 的命令，初始化包管理配置文件package.json
b、新建src源代码目录
c、在src目录下新建index.html首页
d、初始化首页的结构
e、运行npm install jquery -S命令，安装jquery

在项目中配置安装和配置webpack

a、运行npm install webpack webpack-cli -D命令，安装webpack相关的包
b、在项目根目录中，创建名为webpack.config.js的webpack配置文件
c、在webpack的配置文件中，初始化如下配置

module.exports = {
    //编译模式,development、production,两个值可以选
    mode:'development' //mode用来指定构建模式
}

d、在package.json文件中找到scripts节点下，新增dev脚本

"dev":"webpack"

e、在终端输入npm run dev命令，进行webpack项目打包

配置指定的打包入口和出口，在webpack.config.js文件中配置

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

配置自动打包功能

a、运行 npm install webpack-dev-server -D 命令，安装支持项目自动打包的工具
b、修改package.json->scripts中的dev命令，修改成”dev”:”webpack-dev-server”
c、将 src/index.html 中,script脚本的引入路径，修改为”buldie.js”

配置html-webpack-plugin生成预览页面

a、npm i html-webpack-plugin -D安装生成预览页面的插件
b、修改webpack.config.js文件的头部区域，添加如下配置

const HtmlWebpackPlugin = require('html-webpack-plugin);
const  htmlplugin = new HtmlWebpackPlugin ({
    //指定用到的模板文件
    template:'./src/index.html',
    //指定生成的文件名，该文件存在内存中，目录中不显示
    filename:'index.html'
})

c、webpack.config.js文件中新增plugins节点

加载器的基本使用

a、运行命令npm i style-loader css-loader -D，安装处理css文件的loader
b、在webpack.config.js中的module-rules数组中添加loader规则

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

打包处理less文件

a、运行npm i less-loader less -D命令
b、在上面的rules新增一个规则，即{test:/.less$/,use:[‘style-loader’,’css-loader’,’less-loader’]}

打包处理scss文件

a、运行npm i sass-loader node-sass -D命令
b、在上面的rules新增一个规则，即{test:/.scss$/,use:[‘style-loader’,’css-loader’,’sass-loader’]}

配置postCSS自动添加css的兼容前缀，解决一些样式兼容性

a、运行npm i postcss-loader autoprefixer -D命令
b、在项目根目录新建postcss的配置文件postcss.config.js,在文件里写上

const autoprefixer = require('autoprefixer')
module.exports = {
    plugins:[autoprefixer]//挂载插件
}

c、在webpack.config.js中修改module下的rules，新增一个postcss-loader

打包样式文件中的图片和字体文件

a、运行npm i url-loader file-loader -D命令
b、在webpack.config.js的module下面的rules数组中，添加loader规则
{test:/.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,use:[‘url-loader?limit=16940’]}

打包处理js文件中的高级语法

a、安装babel转换器相关的包：npm i babel-loader @babel/core @babel/runtime -D
b、安装babel语法插件相关的包:npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
c、在项目根目录中，创建babel配置文件babel.config.js并初始化

module.exports ={
    presets:['@babel/preset-env'],
    plugins:['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties']
}

d、在webpack.config.js的module下的rules数组中添加一个规则，{test:/.js$/,use:’babel-loader’,exclude:/node_modules/}

配置vue组件的加载器

a、运行npm i vue-loader vue-template-compiler -D命令
b、在webpack.config.js配置文件中，添加vue-loader的配置

plugins:[htmlplugin,new VueLoaderPlugin()]
{test:/\.vue$/,use:'vue-loader'}

在webpack中使用vue

a、运行npm i vue -S命令安装vue
b、在src下的index.js入口文件中，通过import Vue from ‘vue’来导入vue构造函数
c、创建vue的实例对象，并指定要控制的el区域
d、通过render函数渲染App根组件

webpack打包发布

a、通过package.json文件配置打包命令”build”:”webpack -p”
b、运行npm run build命令即会开始打包