webpack基础

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

然后在文件中配置选项

 1 //webpack的配置选项
 2 //__dirname：当前文件所在的目录路径
 3 const config ={
 4     //入口
 5     entry:'./src/js/index.js',
 6     //出口
 7     output:{
 8         filename:'index.js',
 9         //必须是绝对路径
10         path:__dirname+'/dist'
11     }
12 };


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

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位数字

13 
14 
15 //导出配置项    module.exports node.js里的导出语法
16 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

猜你喜欢