专栏首页前端导学webpack 使用笔记

webpack 使用笔记

全局方式安装,打包

安装

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • webpack4 入门

    源码地址 https://github.com/lilugirl/learn-webpack4/tree/master/3

    lilugirl
  • npm操作报错 _stream_writable.js:61

    有一天 不知道什么原因(估计和node的版本有关),无论你做什么npm的操作 都会报错/usr/local/lib/node_modules/npm/node_...

    lilugirl
  • flexbox简易教程

    lilugirl
  • npm

    Dean0731
  • 视频|“交交”萌化网友,服务机器人火了

    镁客网
  • npm脚本和package.json

      在创建node.js项目如一个vue项目,或一个react项目时,项目都会生成一个描述文件package.json 。

    tandaxia
  • windows环境安装vue-cli及webpack并创建VueJS项目

    1. 安装node.js, Node.js安装包及源码下载地址为:https://nodejs.org/en/download/。 这次node.js不是主角,...

    企鹅号小编
  • npm scripts的使用

    npm 允许在package.json文件里面,使用scripts字段定义脚本命令。

    javascript.shop
  • 如何将你封装的组件使用 npm 发布

    我们开发的之后期望的结果是支持 import、require 或者直接使用 script 标签的形式引入,就像这样:

    Javanx
  • npm scripts 使用指南

    Node 开发离不开 npm,而脚本功能是 npm 最强大、最常用的功能之一。 本文介绍如何使用 npm 脚本(npm scripts)。 ? 一、什么是 np...

    ruanyf

扫码关注云+社区

领取腾讯云代金券