Webpack的使用
在项目中安装和配置webpack
1、运行npm install webpack webpack-cli -D命令 安装webpack相关的包
2、在项目的根目录中，创建webpack.config.js的webpack 配置文件
3、在webpack 的配置文件中初始化如下基本配置
module.exports={
mode:'development'
}
4、在package.json 配置文件中的scripts节点下新增dev脚本如下:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack"
}
5、在终端输入 npm run dev 命令 ，启动webpack进行项目的打包
注意：该打包的方式因为没有指定打包的具体js文件名称和打包后js文件的名称，所以采用默认设置，打包的为index.js文件，打包后文件存放在dist文件中，文件名称为main.js
配置webpack打包的名称，路径
const path = require('path') //导入node.js中专门操作路径的对象path
module.exports={
mode:'development', //设置当前打包的模式 有两种 development & production
entry:path.join(__dirname , './src/index.js'), //配置打包入口
output: {
path: path.join(__dirname , './dist'),//设置输出文件的路径
filename: 'bundle.js' //设置输出文件的名称
}
}
之后运行 npm run dev ,发现dist 文件中出现一个bundle.js文件 同时修改html文件中的js路径即可。
配置webpack的自动打包
作用：当改变JS中的某一部分内容时，无需再次运行命令 npm run dev 打包.
1、运行 npm install webpack-dev-server -D 命令 ，安装支持项目自动打包的工具
2、修改package.json中 scripts中的dev命令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server"
},
3、将src中要运行的html中的 js路径修改为根目录下的JS文件
<script src="/bundle.js"></script>
之后运行 npm run dev 命令打包一次即可
在浏览器中访问http://localhost:8080地址即可查看自动打包的效果
注意：webpack-dev-server 会生成一个实时的http服务器，打包生成的js文件默认放到了根目录中，但是看不到，是虚拟的，实际上是占用的物理内存。
配置webpack的默认生成预览页
作用： 在配置完自动打包后，访问localhost:8080 无法直接访问打包的页面，而是该项目的总目录。这里配置完默认生成预览页后，可以直接访问到项目的默认打包页
1、安装html-webpack-plugin插件:npm install html-webpack-plugin
2、在配置文件中引入node.js中的该插件的对象
const HtmlWebpackPlugin =require('html-webpack-plugin');
3、为该对象创建实例实例，添加需求
const htmlPlugin = new HtmlWebpackPlugin({
template: './src/index.html', //指定要用到的模板文件
filename: 'index.html'//指定生成的文件名称，改文件存在于内存中，在目录中不显示
});
4、在module中注册plugin实例对象
module.exports={
mode:'development', //设置当前打包的模式 有两种 development & production
entry:path.join(__dirname , './src/index.js'), //配置打包入口
output: {
path: path.join(__dirname , './dist'),//设置输出文件的路径
filename: 'bundle.js' //设置输出文件的名称
},
plugins: [htmlPlugin] //注册实例对象
};
之后运行 npm run dev即可
配置打包完成后自动打开浏览器进行浏览
在配置文件 package.json中的scripts节点中的 dev 节点中 加上 --ope即可 这是自动打开本地的浏览器，如果是服务器端 则后面还可以加上--host IP --port
webpack 配置打包除JS文件类型的其他文件类型的加载器
打包CSS文件
作用：基本的Webpack只能打包JS文件，但是要是其中包含CSS等其他类型的文件的时候是不能打包的，这时候要加入加载器，进行辅助打包
1、npm i style-loader css-loader 命令，安装处理 css文件的loader
2、在webpack.config.js 中的module 中 添加module 子节点 ，子节点中包含rules子节点 配置css的加载器
module: {
rules: [
{test: /\.css$/ , use:['style-loader' , 'css-loader']}
]
}
test表示匹配的文件类型，use表示要用到的加载器
webpack为有浏览器兼容性的样式自动配置兼容性前缀
1、运行npm i postcss-loader autoprefixer 命令
2、在项目根目录中创建postcss的配置文件 postcss.config.js 并初始化以下内容
const autoprefixer = require('autoprefixer'); //导入插件
module.exports = {
plugin:[autoprefixer] //挂载插件
}
webpack 配置Vue单文件 环境
1、运行 npm i vue-loader vue-template-compiler命令
2、在webpack.config.js配置文件中添加如下配置
const VueLoaderPlugin = require('vue-loader/lib/plugin');
plugins: [htmlPlugin , new VueLoaderPlugin()], //注册实例对象
module: {
rules: [
{test: /\.css$/ , use:['style-loader' , 'css-loader']},
{test: /\.less$/ , use:['style-loader', 'css-loader' , 'less-loader']},
{test: /\.css$/ , use:['style-loader' , 'css-loader', 'postcss-loader']},
{test:/\.vue$/ , loader: 'vue-loader'}
]
