webpack入门笔记

Posted 2020-10-12

1.cmd--项目目录下使用 npm init 创建package.json文件。

　　系统会询问 package name等信息。如果使用了 -f（代表force）、-y（代表yes），则跳过提问阶段，直接生成一个新的 package.json 文件。

2.package.json文件已经就绪，我们在本项目中安装Webpack作为依赖包
　　//全局安装
　　npm install -g webpack
　　//安装到你的项目目录
　　npm install webpack --save-dev

3.回到之前的空文件夹，并在里面创建两个文件夹,app文件夹和public文件夹，app文件夹用来存放原始数据和我们将写的javascript模块，public文件夹用来存放之后供浏览器读取的文件（包括使用webpack打包生成的js文件以及一个index.html文件）。接下来再创建三个文件:
　　index.html --放在public文件夹中;
　　greeter.js-- 放在app文件夹中;//模块文件
　　main.js-- 放在app文件夹中;//主文件

4.使用webpack:
　　node_modules/.bin/webpack 主入口文件路径 打包后的js文件路径
　　node_modules/.bin/webpack app/main.js public/bundle.js

5.通过配置文件使用webpack:
　　在项目文件夹根目录下新建配置文件 webpack.config.js
　　代码:
　　module.exports = {
　　　　entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
　　　　output: {
　　　　　　path: __dirname + "/public",//打包后的文件存放的地方
　　　　　　filename: "bundle.js"//打包后输出文件的文件名
　　　　},
　　　　module:{
　　　　　　loaders:[
　　　　　　　　{
　　　　　　　　　　test:/\.js$/,
　　　　　　　　　　loader:‘babel-loader‘ //首先需要安装babel
　　　　　　　　}
　　　　　　]
　　　　}
　　}
　　有了配置文件之后,在终端运行
　　node_modules/.bin/webpack

6.npm start
　　在package.json中对scripts对象进行设置
　　"scripts":{
　　　　"start" : "webpack"
　　}
　　终端运行 npm start 即可打包文件

7.安装babel(管理员模式下运行cmd)
　　npm install --save-dev babel-loader babel-core

8.监视模式 webpack --watch