webpack 使用笔记

lilugirl

发布于 2019-05-28 11:34:56

3330

发布于 2019-05-28 11:34:56

全局方式安装，打包

安装

npm i webpack -g

打包文件

webpack a.js bundle.js

//a.js 入口文件
//生成bundle.js

项目的方式打包

生成项目

npm init -y

项目内安装

npm i webpack -D

打包文件

node_modules/.bin/webpack a.js bundle.js

或定义命令

执行命令

npm run pack

通过webpack.config.js文件生成打包文件

执行 npm run pack 即可

模拟真实的项目环境配置

webpack.config.js配置如下

module.exports={
  entry:{
    home:'./js/home.js',
    signup:'./js/signup.js',
  },
  output:{
    filename:'[name].bundle.js',
    path:__dirname+'/dist',
  }
}

执行 npm run pack ，定义了两个入口文件，也相应生成两个dist文件

使用loader加载css等其它资源文件

首先安装css-loader和style-loader

npm i css-loader style-loader -D

在webpack.config.js中添加如下模块代表能够识别.css文件的import

执行 npm run pack

项目所有代码 https://coding.net/u/lilu/p/simple_webpack/git/tree/master

常用的工具安装

npm install css-loader style-loader babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime --save-dev

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

webpack