这几天学习webpack，脑袋乱乱的。感觉需要整个的梳理一遍。以后有什么不懂的时候可以回过头来看看。
webpack准备
首先我们需要新建一个目录，开始我们的webpack之旅~
mkdir webpack-demo
ok,找到文档撸起袖子开敲！等一等，我们需要先做一些准备工作
npm init 目录下新增一个package.json文件
我们找到webpack的github（因为只有在这上面才有最新的3.0版）
npm install --save-dev webpack （本地安装）
配置好整个环境，磨刀不误砍柴工
git init
git add .
git commit -v
为了更加方便的了解npm，我们可以做一些准备
运行 npm config set loglevel http 让你知道 npm 发的每一个请求
运行 npm config set progress false 关闭那个进度条
为了让你的安装速度变快
运行 npm config set registry https://registry.npm.taobao.org/
这会让你在运行 npm adduser 的时候出问题，想要恢复成原样，只需要 npm config delete registry 即可
webpack安装
没啥说的，打开文档，无脑敲
npm i -g webpack 正式安装 webpack (全局安装)
- 如果报错说有权限问题，就是用
sudo npm i -g webpack - 辣鸡 window 请用 Git Bash
验证安装成功
运行webpack --help会看到以下信息
webpack 1.14.0
Usage: https://webpack.github.io/docs/cli.html
...
...
--display-cached-assets
--display-reasons, --verbose, -v
我们就完成了webpack的配置安装工作
webpack创建页面
github上点开的Get Started
project
webpack-demo
|- package.json
|- /dist
|- index.html
|- /src
|- index.js
npm install --save lodash
src/index.js
import _ from 'lodash';
//"npm jquery" import $ from 'jquery'
function component() {
var element = document.createElement('div');
//var $div = $('<div/>')
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
//$div.html(_.join(['Hello', 'webpack'], ' ') )
return element;
//return $div
}
document.body.appendChild(component());
//$(document.body).append(component())
index.html
<html>
<head>
<title>Getting Started</title>
<script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
let's run webpack
./node_modules/.bin/webpack src/index.js dist/bundle.js
package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "build": "webpack", webpack
+ "watch": "webpack --watch" 随时监控
},
webpack集合
npm run build
npm i -S jquery
我们要加载js（webpack.config.js）例子：
var path = require('path');
var HtmlwebpackPlugin = require('html-webpack-plugin');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle-[hash].js',
path: path.resolve(__dirname, 'dist')
},
devServer: {
contentBase: path.join(__dirname, "dist"),
compress: true,
port: 9000
},
plugins: [
new HtmlwebpackPlugin({
title: 'Webpack-demos',
filename: 'index.html'
}),
new OpenBrowserPlugin({
url: 'http://localhost:9000'
})
],
module: {
loaders:[
{ test: /\.less/,
loaders: ['style-loader',
'css-loader',
'autoprefixer-loader',
'less-loader'
] },
{ test: /\.(png|jpg)$/,
loaders: [
'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack-loader'
] },
]
}
};
运行 webpack，出错：
ERROR in Entry module not found: Error:
Cannot resolve module 'xxx-loaderr' in /tmp/webpack-demo
上面的提示说没有 'xxx-loader' ，我们就直接安装这个东西
npm i -D xxx-loader
然后继续npm run bulid,可能会继续缺少什么，我们继续安装就行
网友评论