Webpack的使用

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'}
         ]
 ​