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:{},  //配置解析
}