webpack安装配置

1.先在cmd检查 node -v   还有 npm -v 是否输出版本号

2.新建一个项目输入  mkdir app   

  本文项目位置 C:UsersSEELEDesktopapp 

3.全局安装:输入npm install webpack -g  回车  

4.生成配置文件 npm  init  (开始配置的文件过程如下:出现之后只要回车即可)

检查目录有没package.json

5.安装webpack依赖:在cmd输入:npm  install webpack --save-dev  回车

6.修改package.json中的scripts

  "scripts": {
"build": "webpack "
},

7.新建webpack.config.js  输入以下内容

module.exports = {
entry: __dirname + "/index.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
}
}

8.在根目录新建 index.js ,内容自定义

9.npm run build 

10.检查项目中是否导出  public/bundle.js

11. 添加css loader ,打包css 文件 。npm install --save-dev style-loader css-loader

12.修改成一下内容

module.exports = {
entry: __dirname + "/index.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
},
module: {
rules: [
{
test: /.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}
}
  

原文地址:https://www.cnblogs.com/orangegem/p/8484227.html