webpack基础

首先我们需要手动创建webpack.config.js文件

然后在文件中配置选项

 //webpack的配置选项
 //__dirname：当前文件所在的目录路径
 const config ={
     //入口
     entry:'./src/js/index.js',
     //出口
     output:{
         filename:'index.js',
         //必须是绝对路径
         path:__dirname+'/dist'
     }
 };

//这里是命名的其他写法

entry:{
    'index.js':'./src/js/index.js';
    'common.js'：'./src/js/common.js';
},
output:{
  filename:'[name].js' //表示打包后的名字是键名
  path:__dirname+'dist'
}

//filename:'[hash].js'  表示单个文件以哈希值命名
//filename:'[chunkhash].js'  表示有几个文件就用几个哈希值命名
[hash:8]表示只取哈希值的前8位数字

 //导出配置项    module.exports node.js里的导出语法
 module.exports = config;

在JS中导出函数的方法是

export default 函数名;  //ES6语法

导入函数的方法是

//导入JS模块
import 新的函数名（也可跟之前的一样） from  '路径';

webpack天生只支持JS模块 不支持其他模块

如果要引入CSS模块，需要先下载loader（loader就是让webpack可以处理非JS的文件）

首先需要创建npm的配置文件 npm init --yes(yes表示全部默认)

cnpm install style-loader -D

cnpm install css-loader -D

安装完毕后会在package.json文件中显示是否安装成功

下来在webpack.config.js文件中配置

需要注意的是use中的loader顺序不能写反，执行顺序是从后往前，从右往左。必须先转成css再插入到style中。一定要注意

接下来是插件，这里的例子是HTML模板插件

下载语法是:cnpm install html-webpack-plugin -D

用法：注意这里的webpack版本不符   这里的html-webpack-plugin版本是2.30.1