前端webpack初识（marksehng）

安装步骤    

1.npm init               npm init -y    //没有过程选择

2.安装webpack webpack-cli。cli是可以让我们在命令行中使用webpack。

     npm install webpack webnpm pack-cli -D

3.npx指令会从当前目录中查找webpack

npx webpack -v    //查找当前目录的webpack版本
npm webpack -v    //查找全局目录的webpack版本

4.查找包版本

npm info 包名

5.添加一些基本js文件(简单命令：px webpack   ./文件名)   

路径要写对

6.翻译不方便，所以添加webpack.config.js配置文件，并且做基本的配置。

 

const path = require('path');

entry: {
    //名字随便添加
    main: './index.js',	//入口文件
},    //打包入口
//输出目录
output: {
    chunkFilename: '[name].chunk.js',	//非入口文件名称
    // publicPath: 'scripts/',  //在页面引用js的时候在前面加上这个路径
    filename: '[name].js',  //生成的文件名，[name]是在entry中定义的key值，也可以使用[hash]占位符
    path: path.resolve(__dirname, '../dist') //打包路径，__dirname是webpack.config.js这个文件所处的文件夹
}

现在可以通过如下命令来进行打包。


npx webpack --config ./webpack.config.js
npx webpack	//可以省去后面的--config配置，因为会自动识webpack.config.js配置文件

为了万一使用`npm webpack`使用全局`webpack`打包并且规范化，所以需要将这个指令添加至`package.json`里的`scripts`中。

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


最后可以使用`npm run build`命令来运行。

标题