webpack基本使用

1.webpack基本使用

全局或者局部安装 webpack和webpack-cli

npm init ：生成package.json文件

• dependencies 为生产环境依赖
• devDependencies 为开发环境依赖

webpack.config.js 配置文件

输入 webpack 命令自动寻找配置文件

配置文件信息的六个概念：

• 入口(entry)
• 输出(output)
• loader 插件(plugin)
• 模式(mode)
• 浏览器兼容性(browser compatibility)
• 环境(environment)

配置编译打包的出入口文件

module.exports = {
  entry: path.join(__dirname, './src/main.js'), // 入口文件
  output: { // 指定输出选项
    path: path.join(__dirname, './dist'), // 输出路径
    filename: 'bundle.js' // 指定输出文件的名称
  }
 }

配置所有第三方loader 模块

module: { // 配置所有第三方loader 模块的
    rules: [ // 第三方模块的匹配规则
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }, 
      // 处理 CSS 文件的 loader
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, 
      // 处理 less 文件的 loader
      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, 
      // 处理 scss 文件的 loader
      { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }, 
      // 处理 图片路径的 loader
      // limit 给定的值，是图片的大小，单位是 byte， 如果我们引用的图片
      //大于或等于给定的 limit值，则不会被转为base64格式的字符串
      //如果 图片小于给定的 limit 值，则会被转为 base64的字符串
      { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, 
      // 处理 字体文件的 loader 
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, 
      // 配置 Babel 来转换高级的ES语法
    ]
  }

配置顺序是从右往左的链式调用

比如处理less的loader是先执行less-loader再执行css-loader、style-loader

.babelrc文件配置

语法转义器。主要对javascript最新的语法糖进行编译，并不负责转译javascript新增的api和全局对象。例如let/const就可以被编译，而includes/Object.assign等并不能被编译。常用到的转译器包有，babel-preset-env、babel-preset-es2015、babel-preset-es2016、babel-preset-es2017、babel-preset-latest等。在实际开发中可以只选用babel-preset-env来代替余下的，但是还需要配上javascirpt的制作规范一起使用。

创建预设(presets)

{
"presets": ["env", "stage-0"],
}