ES6模塊化的語(yǔ)法學(xué)習(xí)

a、默認(rèn)導(dǎo)出，使用export default 默認(rèn)導(dǎo)出的成員
b、默認(rèn)導(dǎo)入，import 接受名稱 from ‘模塊標(biāo)識(shí)符’
c、按需導(dǎo)出，使用語(yǔ)法：export let s1=10，方法的語(yǔ)法：export function test =function {}
d、按需導(dǎo)入，使用語(yǔ)法：import {s1} from ‘模塊標(biāo)識(shí)符’

webpack的基本使用學(xué)習(xí)

a、新建空白項(xiàng)目，在根目錄中運(yùn)行 npm init -y 的命令，初始化包管理配置文件package.json
b、新建src源代碼目錄
c、在src目錄下新建index.html首頁(yè)
d、初始化首頁(yè)的結(jié)構(gòu)
e、運(yùn)行npm install jquery -S命令，安裝jquery

在項(xiàng)目中配置安裝和配置webpack

a、運(yùn)行npm install webpack webpack-cli -D命令，安裝webpack相關(guān)的包
b、在項(xiàng)目根目錄中，創(chuàng)建名為webpack.config.js的webpack配置文件
c、在webpack的配置文件中，初始化如下配置

module.exports = {
    //編譯模式,development、production,兩個(gè)值可以選
    mode:'development' //mode用來(lái)指定構(gòu)建模式
}

d、在package.json文件中找到scripts節(jié)點(diǎn)下，新增dev腳本

"dev":"webpack"

e、在終端輸入npm run dev命令，進(jìn)行webpack項(xiàng)目打包

配置指定的打包入口和出口，在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'
  }
};

配置自動(dòng)打包功能

a、運(yùn)行 npm install webpack-dev-server -D 命令，安裝支持項(xiàng)目自動(dòng)打包的工具
b、修改package.json->scripts中的dev命令，修改成”dev”:”webpack-dev-server”
c、將 src/index.html 中,script腳本的引入路徑，修改為”buldie.js”

配置html-webpack-plugin生成預(yù)覽頁(yè)面

a、npm i html-webpack-plugin -D安裝生成預(yù)覽頁(yè)面的插件
b、修改webpack.config.js文件的頭部區(qū)域，添加如下配置

const HtmlWebpackPlugin = require('html-webpack-plugin);
const  htmlplugin = new HtmlWebpackPlugin ({
    //指定用到的模板文件
    template:'./src/index.html',
    //指定生成的文件名，該文件存在內(nèi)存中，目錄中不顯示
    filename:'index.html'
})

c、webpack.config.js文件中新增plugins節(jié)點(diǎn)

加載器的基本使用

a、運(yùn)行命令npm i style-loader css-loader -D，安裝處理css文件的loader
b、在webpack.config.js中的module-rules數(shù)組中添加loader規(guī)則

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

打包處理less文件

a、運(yùn)行npm i less-loader less -D命令
b、在上面的rules新增一個(gè)規(guī)則，即{test:/.less$/,use:[‘style-loader’,’css-loader’,’less-loader’]}

打包處理scss文件

a、運(yùn)行npm i sass-loader node-sass -D命令
b、在上面的rules新增一個(gè)規(guī)則，即{test:/.scss$/,use:[‘style-loader’,’css-loader’,’sass-loader’]}

配置postCSS自動(dòng)添加css的兼容前綴，解決一些樣式兼容性

a、運(yùn)行npm i postcss-loader autoprefixer -D命令
b、在項(xiàng)目根目錄新建postcss的配置文件postcss.config.js,在文件里寫上

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

c、在webpack.config.js中修改module下的rules，新增一個(gè)postcss-loader

打包樣式文件中的圖片和字體文件

a、運(yùn)行npm i url-loader file-loader -D命令
b、在webpack.config.js的module下面的rules數(shù)組中，添加loader規(guī)則
{test:/.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,use:[‘url-loader?limit=16940’]}

打包處理js文件中的高級(jí)語(yǔ)法

a、安裝babel轉(zhuǎn)換器相關(guān)的包：npm i babel-loader @babel/core @babel/runtime -D
b、安裝babel語(yǔ)法插件相關(guān)的包:npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
c、在項(xiàng)目根目錄中，創(chuàng)建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數(shù)組中添加一個(gè)規(guī)則，{test:/.js$/,use:’babel-loader’,exclude:/node_modules/}

配置vue組件的加載器

a、運(yùn)行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、運(yùn)行npm i vue -S命令安裝vue
b、在src下的index.js入口文件中，通過(guò)import Vue from ‘vue’來(lái)導(dǎo)入vue構(gòu)造函數(shù)
c、創(chuàng)建vue的實(shí)例對(duì)象，并指定要控制的el區(qū)域
d、通過(guò)render函數(shù)渲染App根組件

webpack打包發(fā)布

a、通過(guò)package.json文件配置打包命令”build”:”webpack -p”
b、運(yùn)行npm run build命令即會(huì)開始打包