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




 





			posted on 2018-05-03 21:41 程序是简单的，就是脑袋凉 阅读(…) 评论(…)  编辑 收藏
		



							

   
版权声明：本文为xhh-xjj原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。



本文链接：https://www.cnblogs.com/xhh-xjj/p/8987689.html