第二章：安装和初始化
因为webpack是基于nodejs的，所以我们需要先安装一个nodejs。
已经安装过nodejs的小伙伴可以跳过这一步:
首先我们需要安装nodejs
vuecli是基于webpack的，而webpack又是基于nodejs的。所以我们需要先在电脑上安装nodejs。
你可以到了nodejs的官方下载一个符合你系统的版本——nodejs下载
安装完毕以后，打开命令提示符，如果你找不到，直接搜索cmd。
打开cmd窗口
然后输入
输入-v查看版本
看到版本号，说明安装成功！
接下来全局安装webpack3.8.1！
直接输入
npm -g i webpack@3.8.1
安装完毕查看一下版本号。
查看版本号
现在所有准备工作都准备就绪了，然后我们开始初始化一个webpack项目：
初始化webpack项目
找一个文件夹，打开doc框输入
npm init
你会看到很多需要你输入的东西，不用管，一路回车。
生成包配置json
这一步是生成一个package.json，这个是npm的包管理文件。
然后我的建议是，你把文件改成我这样：
{
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-runtime": "^6.26.0",
"autoprefixer": "^7.2.3",
"css-loader": "^0.28.7",
"style-loader": "^0.21.0",
"less-loader": "^4.1.0",
"url-loader": "^0.6.2",
"file-loader": "^1.1.6",
"html-webpack-plugin": "^2.30.1",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.7",
"webpack-require-http": "^0.4.3",
"extract-text-webpack-plugin": "^3.0.2"
},
"name": "demo",
"version": "1.0.0",
"main": "webpack.js",
"dependencies": {
"bootstrap": "^3.3.7",
"html-loader": "^0.5.5",
"jquery": "^2.1.1",
"less": "^3.0.4",
"less-loader": "^4.1.0",
"style-loader": "^0.21.0",
"webpack-dev-server": "^2.11.5"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch",
"dev": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"description": "",
"babel": {
"presets": [
"es2015",
"react"
]
}
}
然后输入一遍
npm install
这样我们需要的支持包就全有了。
接下来
新建一个webpack.config.js，这是webpack的配置文件。
像我这样写：
// 引入webpack
const webpack = require('webpack')
// 引入html生成插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入css压缩插件
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
// 入口文件，指向app.js
entry: {
index: './src/js/index.js',
},
// 出口文件
output: {
// 项目的路径
path: __dirname + '/dist',
// 增加随机数防止缓存
//filename: 'js/[name].[hash:5].js',
// 输出的文件的路径
filename: 'js/[name].js',
// 为使用热启动后产生的日志文件设定输入路径
hotUpdateChunkFilename: 'hot/hot-update.js',
hotUpdateMainFilename: 'hot/hot-update.json'
},
externals:[
// 让webpack可以加载外部http资源 例如螳螂
require('webpack-require-http')
],
// webpack-dev-server 环境
devServer: {
contentBase: './dist',
hot: true
},
module: {
// loader放在rules这个数组里面
rules: [
{
//把es6转换成es5
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.html$/,
use: {
loader: 'html-loader'
}
},
{
//识别图片
test: /\.(png|jpg|gif)$/,
loader: 'url-loader',
options: {
limit: 4096,
name: 'image/[name].[ext]'
}
},
{
//压缩css
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
publicPath: "../",
use: [
{
loader: 'css-loader',
options:{
minimize: true //css压缩
}
}
]
})
},
{
//识别字体文件
test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader?name=./fonts/[name].[ext]'
},
]
},
// 将插件添加到webpack中
plugins: [
// 开启多页应用 生成html文件
new HtmlWebpackPlugin({
//模板文件是哪个
template: './src/index.html',
//选择注入哪个文件
chunks: ['index'],
//是否添加hash随机数防止缓存
//hash: true,
//开启html压缩
minify:{
removeComments:true, //移除HTML中的注释
collapseWhitespace:true//压缩为一行
},
// manual根据chunks的位置手动排序
chunksSortMode: "manual"
}),
// 防止webpack一直弹出警告 加载HMR需要的两个插件
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
// 解决加载jquery后 jquery不能获得$符控制权的问题
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
new ExtractTextPlugin("css/styles.css"),
]
}
你现在肯定有点懵，这是干什么呢？？上来一顿配置，我都不知道干什么呢。
不用着急，我们先把开发环境配置好，当我们开始使用的时候，我们会逐个讲解这些配置用到的地方！
到了这一步，你的项目文件夹下面，应该有node_modules文件夹，一个package.json文件和一个webpack.config.js文件。
好的，
然后你再创建两个文件夹，一个叫src，一个叫dist。
全部完成以后是这样的：
目录结构
保持这样，下一个章节我们会详细讲解项目的目录结构！
网友评论