一、入口和出口的配置
1.在项目的根目录下新建一个webpack.config.js(用来存放一些有关webpack的一些配置)文件
2.项目当中如果用到node相关的东西的话,需要进行初始化npm init(-y),之后会生成package.json 文件
3.过commonJS的方式导出一个对象
const path = require("path");
module.exports = {
entry: "./src/main.js",//入口
output: {//出口
path: path.resolve(__dirname, "dist"),
filename: "bundle.js"
}
}
4.在终端直接执行webpack即可
二、webpack局部安装
1.安装本地webpack
cnpm install webpack@3.6.0 --save-dev
(运行时依赖)
安装完成后,会有一个文件夹,如下
2.npm映射
在初始化之后(npm init)打开package.json,找到scripts字段,在该对象里加入属性:“要替代的指令”,执行指令则执行npm run 属性
例如: webpack被替代为build。替代后的执行指令为npm run build
{
"name": "exit",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"author": "",
"license": "ISC"
}
写完该脚本之后,在执行指令时优先寻找本地的webpack
3.在终端里(cmd/编译器自带的终端等)敲的命令都是全局的,若果想用本地的,必须要找到本地的webpack文件,但是npm映射之后就不用了,这也是npm映射的好处之一
三、webpack中使用css文件的配置
使用loader过程:
1.通过npm安装需要的loader
npm install --save-dev style-loader
npm install --save-dev css-loader
(如果觉得npm太慢,可以使用淘宝镜像cnpm)
建立自己的css文件,例如我建立的是normal.css
2.在入口文件加入:
import "./css/normal.css";
3.在webpack.config.js的modules关键字下进行配置
(大部分的loader都可以在webpack的官网中找到,并且学习对应的用法)
const path = require("path");
module.exports = {
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js"
},
module: {
rules: [{
test: /\.css$/,
// css-loader值负责将css文件进行加载
// style-loader负责将样式添加到DOM中
use: ['style-loader', 'css-loader'],
}, ],
}
}
注意:使用多个loader时,是从右往左读的
3.执行 npm run build,在index.html中引用如下:
注:本篇博客内容需要对webpack进行一些配置,详情请见webpack的配置