webpack的使用

webpack是经常使用到的打包工具,它可以使高阶的语法转为低阶语法,提高生产效率。

  1.安装webpack

  • 在项目的目录下运行 指令
npm install webpack --save-dev 
  • 要想正常使用webpack的功能,还需要运行指令
npm install webpack-cli --save -dev

  2.使用webpack打包项目

  这里在main.js里面引入jquery模块.并且使用ES6的语法,但是在浏览器中无法正常工作。

import $ from 'jquery'

$(function () {
    $("p").onclick(function () {
        $("p").fadeOut("slow");
    })
});
  • 将代码打包到dist文件夹
webpack src/main.js --output dist/js/bundle.js --mode development

 

 

这样便可以运行ES6语法的js代码了。

3.webpack的配置文件

可以在项目中创建一个名为webpack.config.js的文件来进行webpack的相关配置,进行配置后只需要执行 webpack一句指令就可以进行打包

const path = require('path');
modules.export = { entry:"./src/index.js", //入口 output:{
      filename:'bundle.js', //出口文件名
      path:path.resolve(__dirname,'dist') //设置绝对路径
    }, //出口 devServer:{}, //开发服务器 module:{}, //模块配置 plugins:[], //插件配置 mode:
"development", //开发模式配置(可以为production和development) resolve:{}, //配置解析 }

 

posted @ 2020-08-01 20:56  裏Arashi  阅读(107)  评论(0编辑  收藏  举报