webpack基本配置
一、新建项目
二、包管理管理项目
npm init -y
// 当创建的项目根目录名称是中文或者包含中文，就不能使用 -y 命令
// 直接使用 npm init 之后会让你手写项目名称
{
"name": "webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
// 生成了 package.json 文件，该文件集中管理了项目中所用到的包
三、安装webpack
cnpm install webpack -g cnpm install webpack-cli -g
四、webpack.config.js 配置文件
在项目根目录新建 webpack.config.js 文件。先进行一些基础的配置
// 由于webpack是基于node进行构建的，所以，webpack配置文件中，任何合法的node代码都是可以识别的
const path = require('path'); // 当以命令行形式运行webpack 或者 webpack-dev-server 时，没有提供要打包的文件入口和出口文件，
// 就会检查项目根目录中的配置文件，并读取这个文件，就可以拿到这个配置对象，根据这个对象进行打包 module.exports = { entry:'./src/main.js',
// entry:path.resolve(__dirname,'./src/main.js'), output:{ path:path.resolve(__dirname,'dist'), filename:'output.bundle.js' }, mode:'development' } // 这里首先配置了项目打包的入口文件，出口文件，打包的模式
配置完成后在控制台运行命令：webpack 就可以进行打包了，可以看到dist文件夹下面生成了output.bundle.js文件
五、打包完成后，可以在index.html文件中引用打包好的js文件
// main.js 文件
console.log('ok');
// index.html 文件
<script src="../dist/output.bundle.js"></script>
// 运行index.html 打开控制台，可以看到输出了OK
六、webpack-dev-server
现在我们每修改一次代码，就需要重新运行一次，怎样才能自动运行打包呢？
这里需要安装一个工具 webpack-dev-server
cnpm install webpack-dev-server -D // -D 的方式会将这个包安装后放到package.json中的devDependencies里面
这里安装了之后会有一个提示：
peerDependencies WARNING webpack-dev-server@* requires a peer of webpack@^4.0.0 but none was installed
// webpack-dev-server 依赖于webpack，需要进行安装
注意上面我们已经使用过cnpm install webpack -g命令来安装webpack，这与cnpm install webpack -D是不一样的，前者安装可以使我们在控制台运行webpack相关命令，后者安装包，用包管理工具进行管理，运行命令之前可以看一下package.json中的devDependencies里面是没有webpack的
cnpm install webpack -D
cnpm install webpack-cli -D
此时的package.json文件中：
安装好包之后还需要在package.json中添加脚本：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
},
dev 表示当运行命令行 npm run dev 时，局相当于运行它后面的命令
--open 自动打开
--port 3000 指定端口号3000
--contentBase src 指定资源的路径为 src 文件夹
--hot 开启热更新
七、运行 npm run dev
会发现此时会报错，找不到output.bundles.js文件
webpack托管了我们的资源，托管的目录为根路径，那么端口号3000之后就可以跟上output.bundles.js文件，所以问题出在了index.html中script标签中的src值。
解决方法为：
1、将src的值改为 src="/output.bundles.js"
2、将原来的script标签注释掉，使用HtmlWebpackPlugin在内存上生成一个一模一样的页面，会自动将output.bundles.js注入到页面。
八、html-webpack-plugin
1、安装：
cnpm install --save-dev html-webpack-plugin -D
2、在webpack.config.js中进行配置
const path = require('path');
// 在内存中，根据指定的模板页面，生成一份内存中的首页，同时自动把
// 打包好的output.bundles.js注入到页面底部
// 配置插件需要在对象中挂载一个plugins节点
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'output.bundle.js'
},
mode:'development',
plugins:[ // 所有webpack插件的配置节点
new htmlWebpackPlugin({
// 指定模板文件路径
template:path.resolve(__dirname,'./src/index.html'),
// 设置生成的内存页面的名称
filename:'index.html'
})
]
}
3、运行
成功输出了 OK
九、css样式打包---loader
// 新增css 文件夹，index.css文件
html,body{
margin: 0;
padding: 0;
background-color: #fff;
}
// main.js 文件，引入样式文件
import './css/index.css'
运行之后会报错：npm run dev
1、安装：
cnpm install style-loader --save-dev -D cnpm install css-loader --save-dev -D
2、配置：
const path = require('path');
// 在内存中，根据指定的模板页面，生成一份内存中的首页，同时自动把
// 打包好的output.bundles.js注入到页面底部
// 配置插件需要在对象中挂载一个plugins节点
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'output.bundle.js'
},
mode:'development',
plugins:[ // 所有webpack插件的配置节点
new htmlWebpackPlugin({
// 指定模板文件路径
template:path.resolve(__dirname,'./src/index.html'),
// 设置生成的内存页面的名称
filename:'index.html'
})
],
module:{ // 配置所有第三方loader模块
rules:[ // 第三方模块的匹配规则
{ // 处理css文件的loader
test:/\.css$/,
use:['style-loader','css-loader']
}
]
}
}
此时的package.json文件：
可以运行成功了，那么less文件呢？
同样的先安装相应的loader：
cnpm install --save-dev less-loader less -D
{
test:/\.less$/,
use:['style-loader', 'css-loader', 'less-loader']
}
同样的还有sass文件;
cnpm install sass-loader node-sass --save-dev -D
{
test:/\.sass$/,
use:['style-loader', 'css-loader', 'sass-loader']
}
注意：在安装loaders时，可以在每一个loader后面加上@latest，这表示安装最新的包，有时如果包不是最新的，会报错；还要的情况下安装了最新的包也不行，可以试试@next，这表示安装的是已经开发好但还没有对外发布的。
