webpack应用学习

来源：互联网发布：百度的域名值多少钱编辑：程序博客网时间：2024/06/15 02:31

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

0 0