webpack打开项目命令_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文件

之后运行 npm run dev 命令打包一次即可

注意：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'}

]

​