Webpack基础-3

webpack（前端项目构架工具）

• JS (.js .coffee .ts)
• CSS(.css .less .sass .scss stylus)
• image(.jpg .png .gif .bmp .avg)
• 字体文件（.svg .ttf .eot .woff .woff2)
• 模板文件（.ejs .jade .vue ）

1. 合并、压缩（精灵图、图片的base64编码）
2. 使用requireJS或webpack（基于整个项目构建）
3. 使用Gulp，基于task任务

node中

// let webpack = require('webpack') //启用热更新第二步
const $ = require('jquery')
const path = require('path')
module.exports = {
  // 入口，表示要使用哪个webpack打包哪个文件
entry:  path.join(__dirname,'url'),
// 输出文件相关配置
path: path.join(__dirname,''),
//  指定输出文件名称
filename: 'bundle.js',
devServer:{
        // open:true,
        // port:3000,
        // contentBase:'./src',
        // hot: true, //启用热更新第一步
    },//开发服务器
    module:{
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']},//用来处理css的第三代模块,处理顺序，从后向前
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},//用来处理less文件的第三方模块
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
            {test:/\.(jpg|jpeg|png|gif|bmp)$/,use:'url-loader?limit=30000&name=[hash:8]-[name].[ext]'},//处理图片路径的loader
            // limit 给定的值，是图片的大小，单位是byte，如果我们引用的图片大于这个大小，则不会转为base64编码，如果小于这个大小，则会转为base64编码
            // name=[name].[ext]表示名字后缀不变,name=[hash:8]-[name].[ext]前面有8为哈希值
            {test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},//处理字体文件loader
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},//配置babel来转化高级的ES语法
            {test:/\.vue$/,use:'vue-loader'},//处理vue的loader
        ],//所有的匹配规则
    },//模块配置（用于配置所有的第三方模块加载器）
    plugins:[
        // new webpack.HotModuleReplacementPlugin()//启用热更新第三步，一个热更新的模块对象
        new htmlWebpackPlugin({ // 创建一个在内存汇总生成html页面的插件
            template:path.resolve('./src/index.html'),//指定模板页面,
            filename:'index.html',//指定生成页面的名称
        }),
        new VueLoaderPlugin(),
    ],//插件
    mode:'development',//开发者模式
    resolve:{
        // alias:{
        //     "vue$":"vue/dist/vue.js",//设置vue被导入时的路径
        // }
    },//配置解析
}

es6

import $ from 'jquery'

在vs code安装

• vscode-icons

webpack监听代码改变自动编译

• 安装前必须先安装webpack，安装webpack-dev-server工具，实现自动打包编译

npm i webpack-dev-server -D

• 使用npm run dev
  在package.json文件中添加

“dev”: “webpack-dev-server”

• webpack-dev-server帮我们打包生成的bundle.js文件，并没有放在实际的物理磁盘上,而是托管到电脑内存中。可认为与dist、src、node_modules平级
  
  
  node ->nodemon
  webpack->webpack-dev-server

常用的命令参数

–hot：热更新
–open：打开页面
–port 3000：用3000端口
–contentBase src：设置根路径

• webpack中带s基本都是数组，除export之外
• vue就比较反人类
  全局不带s，组件中带s
  filters
  directives
  components
  methods

props