- 项目初始化
项目初始化
必备条件： 已经安装了新的node
（来看看官网的解释 ：在开始之前，请确保安装了 Node.js 的最新版本。使用 Node.js 最新的长期支持版本(LTS - Long Term Support)，是理想的起步。使用旧版本，你可能遇到各种问题，因为它们可能缺少 webpack 功能以及/或者缺少相关 package 包。）
1. 初始化项目
1）. 如果是第一次运行：
npm init
在该目录下通过git输入npm init。如果该目录是中文名称，则会报错。解决办法发：修改文件夹命名。
2）. 如果是从别人那里拿来的package.json，第二次运行：
npm install
如果我们是从别人那里拿来的package.json，那么在初始化的时候需要 npm install 一下，下载配置文件的所有插件
2. 安装webpack 和webpack命令行工具webpack-cli
npm install webpack webpack-cli --save-dev
这是同时安装webpack和webpack-cli。webpack4之后把webpack-cli从webpack中分离出来，需要单独安装webpack-cli。–save-dev 是下载开发版的意思。可以简写成 -D
3. 执行webpack
$ webpack
（报错）webpack4 之后 需要添加默认入口 即文件夹src 并且src中要有个index.js文件 于是我们在该文件夹下面创建文件夹src。 src中创建了index.js文件
- 如果提示没有设置mode环境：
the mode option has not been set
那就设置开发环境
webpack --mode=development
4. 配置webpack.config.js
简单写法一：
module.exports = {
entry:"./src/main.js",
output:{
filename:"bundle.js",
path:__dirname+"out"
},
mode:"development"
}
简单写法二：
var path = require("path")
module.exports = {
entry:"./src/main.js",
output:{
filename:"bundle.js",
// path:__dirname+"/out",
path:path.resolve(__dirname,"out")
},
mode:"development"
}
5.开启webpack服务器
如果我们不想使用wempserver，那就可以webpack的服务器
安装方式：
npm install webpack-dev-server -g
-D是–save-dev的缩写
使用方式：
var path = require("path")
module.exports = {
entry:"./src/main.js",
output:{
filename:"bundle.js",
// path:__dirname+"/out",
path:path.resolve(__dirname,"out")
},
mode:"development",
devServer:{
contentBase:"out",
port:9999
}
}
devServer:{
contentBase:"out", // 设置默认打开localhost：8080时候显示的窗口
port:9999 // 自定义端口 }
webpack安装与使用
四核心：
- 入口（entry）编辑文件
- 出口（output）打包后
- loader（解析器）加载css文件
- 插件（plugins）拓展的功能 比如抽离css文件
webpack应用
第一种情况，在js里面通过require("index.html")方式引入html文件的
demo：
var path = require("path")
module.exports = {
entry:"./src/main.js", // 入口文件很重要 打包的是从入口文件开始 把入口文件引用的文件都打包到一起
/**
* 入口文件也可以这样写
* entry:[
* index:"./src/index.js",
* other:"./src/other/js"
* ]
*/
output:{
// 如果入口文件写成了 上面那种鬼样子 ，不希望出口文件全部打包成一个文件的话 可以这样写
// filename:'[name].js' 或是 '[name].out.js' 其中name对应入口文件的属性 即如上的index、other
filename:"bundle.js",
// path:__dirname+"/out",
path:path.resolve(__dirname,"out")
},
mode:"development",
// 自定义服务器
devServer:{
contentBase:"out", // 自定义服务器页面
port: 9999, // 自定义服务器端口
},
module:{
// 解析器 只解析入口的文件
rules:[
{
// css解析器
test:/\.css$/,
use:['style-loader','css-loader']
},
{
// js es6解析器
test:/\.js$/,
use:['babel-loader']
},
{
// 静态资源解析器
test:/\.(jpg|png|gif)$/,
// use:['url-loader'] // 新版本后 url-loader包含了file-loader功能
// use:['url-loader']是一种写法 另一种写法是
use:[
{
loader:'url-loader',
options:{
limit:8192, // 1024 * 8 = 8192
name:"img/[name].ext"
// 如果图片超过8k 那就保存成原来的样子
}
}
]
},
{
test:/\.html/,
use:[
// 对单独抽离出来的html文件进行配置
{
loader:"file-loader",
options:{
name:"index.html"
// 这里还可以这样写
// name:"[name].html"
// 表示沿用原来的名字命名
}
},
// 单独抽离 html
{
loader:"extract-loader"
},
// 找到html文件
{
loader:"html-loader"
}
]
}
]
}
}
第二种情况，单独分离出来的样式
demo:
// 利用一个插件将html导出
var HtmlWebpackPlugins = require('html-webpack-plugins')
// 压缩css 引入插件包
var Minify = require('minify-css-extract-plugins')
// 压缩js 引入插件包
var Uglify = require('uglifyjs-webpack-plugins')
var path = require("path")
module.exports = {
// 应用插件
plugins:[
// 通过这个插件专门解析html文件 而不是像上面那样子 通过require引用html
// 在使用这个插件之前 需要先安装html-webpack-plugins插件
// $ npm install html-webpack-plugins -D
new HtmlWebpackPlugins({
// 自定义html里面的标题内容
title:'title',
// 根据下面这个html生成一个index.html
// 要注意的是 如果通过插件的方式这样写 相当于用下面这个文件的内容 替换成输出文件夹里面的对应文件的内容
// 生成的文件存在路径问题 因此需要在配置的时候要到下面url-loader下面改一下导出路径
template:'./src/index.html',
minify:{
// 是否压缩空白
collpaseWhitespace:true
}
}),
// js插件 你没有看错 就这样一行就搞定了
new Uglify(),
// 通过这个文件专门解析css文件 使用前需要安装 mini-css-extract-plugins
new Minify ({
// 使用这个的话 需要在css加载器里面将 style-loader 加载器改成 Minify.loader
// 单独抽离出来的文件
filename:'[name]_[contenthash:8].css'
})
],
entry:"./src/main.js", // 入口文件很重要 打包的是从入口文件开始 把入口文件引用的文件都打包到一起
/**
* 入口文件也可以这样写
* entry:[
* index:"./src/index.js",
* other:"./src/other/js"
* ]
*/
output:{
// 如果入口文件写成了 上面那种鬼样子 ，不希望出口文件全部打包成一个文件的话 可以这样写
// filename:'[name].js' 或是 '[name].out.js' 其中name对应入口文件的属性 即如上的index、other
filename:"bundle.js",
// path:__dirname+"/out",
path:path.resolve(__dirname,"out")
},
mode:"development",
// 自定义服务器
devServer:{
contentBase:"out", // 自定义服务器页面
port: 9999, // 自定义服务器端口
},
module:{
// 解析器 只解析入口的文件
rules:[
{
// css解析器
test:/\.css$/,
use:[Minify.loader,'css-loader']
},
{
// js es6解析器
test:/\.js$/,
use:['babel-loader']
},
{
// 静态资源解析器
test:/\.(jpg|png|gif)$/,
// use:['url-loader'] // 新版本后 url-loader包含了file-loader功能
// use:['url-loader']是一种写法 另一种写法是
use:[
{
loader:'url-loader',
options:{
limit:8192, // 1024 * 8 = 8192
// name:"img/[name].[ext]"
name:'[name].[ext],'
// 如果图片超过8k 那就保存成原来的样子
}
}
]
},
// {
// test:/\.html/,
// use:[
// // 对单独抽离出来的html文件进行配置
// {
// loader:"file-loader",
// options:{
// name:"index.html"
// }
// },
// // 单独抽离 html
// {
// loader:"extract-loader"
// },
// // 找到html文件
// {
// loader:"html-loader"
// }
// ]
// }
]
}
}