webpack学习笔记（一）

1、安装Node.js

2、初始化一个webpack项目

　　　命令：npm init --yes

　　　

 

 

 3、全局安装webpack

　　命令：npm install -g webpack

　　　　

 

 

 4、将webpack依赖到项目中

　　命令：npm install --save-dev webpack

　　　

 

 

 　　安装完后，可以在package.json中，devDependencies中有了webpack配置，4.8.0版本。

　　　　

 

 

 

　　注：

　　　　(1)安装时如未指定版本号，则按最新的版本安装，这里webpack安装的是最新的4.17.1的版本

　　　　(2)npm install --save和npm install --save-dev的区别：
　　　　--save 会把依赖包名称添加到 package.json 文件 dependencies 键下，--save-dev 则添加到 package.json 文件 devDependencies 键下。dependencies是发布后还依赖的，devDependencies是开发时的依赖。

　　5、安装webpack-cli

　　　　命令：npm install -g webpack-cli --全局安装

　　　　　　　npm install --save-dev webpack --安装到项目依赖

　　6、测试

　　　　新建一个src目录，在src目录新建app.js,work.js

　　　　新建一个index.html，引用脚本“./dist/bundle.js”

　　　　在work.js脚本中写入：document.write("hello webpack!!!");

　　　　

 

 

 　　7、编译运行

　　　　命令：webpack ./src/app.js

　　　　执行完编译命令后，会多出一个dist目录，里面会有一个bundle.js

　　8、配置webpack文件，免去每次编译还要指定文件

　　　　新建一个webpack.config.js文件，内容如下：　　　　

const path = require('path'); 
const webpack = require('webpack');
module.exports = { 
    entry:{ 
        app:__dirname+'/src/app.js',//唯一入口文件,__dirname是nodejs里的一个全局变量，它指向的是我们项目的根目录 
    }, 
    output:{
        path: path.resolve(__dirname, './dist'),//打包后的文件存放的地方 
        filename:'bundle.js' //打包后输出文件的文件名 
    } 
};

　　　　运行命令：webpack

　　9、可能会遇过的错误：

　　　　a、无法加载文件 xxx\webpack.ps1，因为在此系统上禁止运行脚本

　　　　　　

 

 

 　　　　这是因为操作系统配置不对

　　　　　　1、以管理员身份运行“Windos PowerShell”

　　　　　　2、在“Windos PowerShell”中输入：set-ExecutionPolicy RemoteSigned

　　　　　　3、输入：A

　　　　　　

 　　10、web常用命令

webpack – 开发环境构建
webpack -p – 生产环境构建(压缩混淆脚本)
webpack --watch – 监听变动并自动打包
webpack -d – 生成 map 映射文件
webpack --colors – 构建过程带颜色输出