webpack
安装
-
安装Node.js
-
在Git或者cmd中输入下面这段代码, 通过全局先将webpack指令安装进电脑中
npm install webpack -g -
使用Git Bash here 或者 cmd cd命令使当前目录转到当前项目的目录下, 然后输入下面这段命令
npm init -
接下来会弹出一些信息, 就是一些项目名和一些参数的描述, 可以全部按回车使用默认信息, 完成之后项目文件夹下会生成一个package.json的文件
-
安装完成
-
npm i -D webpack
-S 安装到上线环境
-D 安装到开发环境
-g 安装到全局
-i install
直到等它显示版本号码就表示你成功了 -
再输入安装cli的指令 npm i -D webpack-cli
webpack配置
- 创建项目文件夹, 名字自起, 但路径名不要包含中文, 以及项目名也不要叫”webpack”, 并且不要包含大写字母.
- 创建并编写配置文件. 首先我们先介绍几个配置文件的参数.
entry: 是 页面入口文件配置 (html文件引入唯一的js 文件)
output:对应输出项配置
path :入口文件最终要输出到哪里,
filename:输出文件的名称
publicPath:公共资源路径 - 在你的项目目录下创建webpack.config.js配置文件, 通过这个文件进行webpack的配置, 并且还要创建一些路径保存基本文件. 例如:
- 待续
webpack loader加载器
- npm install babel-loader babel babel-core css-loader style-loader url-loader file-loader less-loader less --save-dev
- 修改webpack.config.js文件, 将加载器引入
module.exports = {
entry : './src/js/entry.js',
output : {
filename : 'index.js',
path : __dirname + '/out'
},
module : {
rules: [
{test: /.js$/, use: ['babel-loader']},
{test: /.css$/, use: ['style-loader', 'css-loader']},/*解析css, 并把css添加到html的style标签里*/
//{test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},/*解析css, 并把css变成文件通过link标签引入*/
{test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},/*解析图片*/
{test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}/*解析less, 把less解析成浏览器可以识别的css语言*/
]
},
}
多个js文件时, 如何进行引入
- 在src的js文件夹下创建一个基本的工具tool.js
//tool.js
var tool = {//获取DOM元素
getDom: function(className) {
return document.getElementsByClassName(className)[0];
}
}
module.exports = tool;//模块出口
- src的js下创建一个demo1.js文件, demo2.js同理
var obj = require('./tool.js');
var demo1 = {
init: function() {
this.bindEvent();
},
bindEvent: function() {
//var demo1 = document.getElementsByClassName('demo1')[0];
var demo1 = obj.getDom('demo1');
demo1.onclick = this.changeStyle;
},
changeStyle: function() {
this.style.width = '200px';
this.style.height = '200px';
this.style.background = 'green';
console.log('1');
}
}
module.exports = demo1;
图片的打包
- 在img文件夹下找个图片放进去
- 修改entry.js
//添加↓
var oImg = new Image();
oImg.src = require('../img/1.gif');//当成模块引入图片
document.body.appendChild(oImg);
多个html文件时怎么处理
配置文件中写入
entry : {index1: './src/js/entry.js', index2: './src/js/entry2.js'},
output : {
filename : '[name].js',//这样就可以生成两个js文件, 名字分别为index1.js, 和index2.js
publicPath: __dirname + '/out',//添加静态资源, 否则会出现路径错误
path : __dirname + '/out'
},
webpack插件使用
- 重新下载一下webpack包
将目录定位到当前项目目录, 输入npm install webpack - 修改webpack.config.js, 将下面代码放到配置文件开头. 这样就可以使用插件了
var webpack = require('webpack');
- 插件信息写到定义后面
var uglifyPlugin = new webpack.optimize.UglifyJsPlugin({
minimize: true
}); //代码压缩
var CommonsChunkPlugin = new webpack.optimize.CommonsChunkPlugin('common'); //把公共模块提取出来, 并取名为'common'(名字自起), webpack之后再out文件夹下生成common.js, 测试时记得引入提取出来的公共模块js文件
var ExtractTextPlugin = require("extract-text-webpack-plugin"); //将css独立引入变成link标签形式, 使用该插件需要独立下载'npm install extract-text-webpack-plugin --save-dev', 同时下面的rules也必须更改
var providePlugin = new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}); //引入jquery
webpack服务器
- 定位目录输入命令 npm install webpack-dev-server -g ,修改webpack.config.js文件
publicPath: 'http://localhost:8080/out',
- html文件所引用的目录也要更改:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>text</title>
<link rel="stylesheet" href="http://localhost:8080/out/index.css">
</head>
<body>
<a href="http://localhost:8080/index2.html">11</a>
<div class="demo1"></div>
<div class="demo2"></div>
<script src="http://localhost:8080/out/common.js"></script>
<script src="http://localhost:8080/out/index.js"></script>
</body>
</html>
- webpack-dev-server一下看看效果
- 找到文件如果错误的位置
- “errorpath”: “webpack-dev-server --devtool eval-source-map --progress --colors”//取名不能带
-
- npm run errorpath