webpack应用学习

最新推荐文章于 2025-05-09 23:46:11 发布

剑宗高手

最新推荐文章于 2025-05-09 23:46:11 发布

阅读量418

点赞数

CC 4.0 BY-SA版权

分类专栏：前端构建工具文章标签：前端工具

本文链接：https://blog.youkuaiyun.com/xuzhen0913/article/details/53642293

前端构建工具专栏收录该内容

0 篇文章

订阅专栏

本文详细介绍了Webpack的基本使用方法，包括在npm环境下初始化项目、全局及本地安装Webpack、加载器的使用、配置文件详解等内容，并提供了常见命令供快速上手。

Webpack使用方法
一.npm 环境下在工作目录 npm init,生成json文件
二.全局环境下安装$ npm install webpack -g
三.本地安装webpack
# 进入项目目录
# 确定已经有 package.json，没有就通过 npm init 创建
# 安装 webpack 依赖
$ npm install webpack --save-dev
四.本地安装webpack
npm install css-loader style-loader –save-dev
五.webpack.config.js配置文件（require('./style.css')）
var webpack = require('webpack')

module.exports = {
entry: './index.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.css$/, loader: 'style!css'}
]
}
}
六．全局安装本地监听服务器
# 安装
$ npm install webpack-dev-server -g
七.本地项目目录安装
$ npm install webpack-dev-server --save-dev

八.安装一次后，之后重建项目，只需要json文件然后npm install就可以复用
{
"name": "webpack123456",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.26.1",
"style-loader": "^0.13.1",
"webpack": "^1.14.0",
"webpack-dev-server": "^1.16.2"
}
}

常用命令：
# 运行
$ webpack-dev-server --progress --colors
# 构建
$ webpack index.js bundle.js