码迷,mamicode.com
首页 > Web开发 > 详细

webpack基本操作

时间:2019-02-16 13:19:15      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:信息   head   配置文件   web   ant   lang   下载   --   modules   

第一步:创建项目文件夹

mkdir webpack-vue

第二步:使用vscode打开文件夹,经行npm初始化

npm   init    -y

第三步:下载项目需要资源包

 生产环境   vue
  npm install --save vue
  
  开发环境  webpack
 
  1. 他是基于nodeJs,所以要确保安装了nodeJs --save-dev工具类型加dev
 
  2. npm install --save-dev webpack 或者 npm install --save-dev webpack@<version> (提供核心功能)
 
  3. npm install --save-dev webpack-cli(提供命令命令行)或者npm install --save-dev webpack-command
 
  注意4.x以上的webpak才需要安装webpack-cli

 第四步:在项目文件夹(webpack-vue)里面创建一个src文件夹,用来存放源文件(source)

//在src文件里面创建一个入口js--->index.js
var a=0;
alert(a);

第五步:在项目根目录创建一个index.html文件,作为入口文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>我是入口文件</h1>
</body>
</html>

第六步:安装需要使用的插件

1.  找到需要使用插件并安装他
    -   命令:npm install --save-dev  html-webpack-plugin
2.  在webpack.config.js中引入他
    -   const   HtmlWebpackPlugin=require(html-webpack-plugin)
3.  在plugins选项中调用他,并按照他的文档中区做配置
    -   //插件,将index.html文件自动打包到dist文件夹里面
                plugins:[
                    //自动生成一个index.html文件在出口位置,并且会自动在生成的文件中引入打包的js文件
                    new HtmlWebpackPlugin({});
                ]

 

第七步:在项目根目录创建一个webpack.config.js文件(这是一个webpack的配置文件)

/**
五大核心
0. 模式 指定这次打包是大的开发环境用的包(不压缩),还是生产环境的包(压缩)。4.x版本的webpack支持的
1. 入口 指定webpack需要打包的项目的入口文件
2. 出口 打包之后生成的文件需要放到哪个位置
3. 加载器 默认情况下,webpack只是简单的打包js文件,如果需要打包css,img之类的文件则需要添加相对应的加载器,去处理这种类型的文件。
4. 插件 插件是加载器干不了的事情,就可以使用插件来干.

ps: 前三个,模式,入口,出口。必须配置
*/

//如何配置
//1. 就是在webpack.config.js文件中,暴露一个对象,使用commonjs方式暴露
const HtmlWebpackPlugin=require(‘html-webpack-plugin‘)
const path=require(‘path‘);
module.exports={
    //模式
    mode:‘development‘,//开发模式||production生成模式
    //入口
    entry:‘./src/index.js‘,//入口js文件的路劲,也可以使用绝对路径。但需要引入path模块
    //出口:
    output:{
        //出口文件必须使用绝对路径
        path:path.resolve(__dirname,‘./dist‘),//会在项目根目录下生成dist文件夹
        //设置文件打包之后的名字
        filename:‘bundle.js‘
    },
    //插件,将index.html文件自动打包到dist文件夹里面使用HtmlWebpackPlugin插件,可以在webpack文档查询
    plugins:[
        //因为插件可能是多个,所以使用数组类型
        //自动生成一个index.html文件在出口位置,并且自动在生成的文件中引入js文件
        //详细配置可以在webpack官网的插件选项里面找到
        //https://github.com/jantimon/html-webpack-plugin#configuration
        new HtmlWebpackPlugin({
            filename:‘entry.html‘,
            //让这个文件内容和根目录的html完全一致
            template:‘./index.html‘,
        })
    ]
}

 第八步:打包

  没有全局安装webpack要执行下列命令。否则直接$webpack
  1.  ./node_modules/.bin/webpack
  2.  npx webpack(npm 5.x+新增的功能)
  3.  配置package.json的npm脚本

项目目录

项目的目录结构
1  dist    (最终生成的文件,这个文件夹才是最终需要上传到服务器上的代码)
3   node_modules(放资源包)
4  src     (源文件,需要被webpack打包的文件,都需要放在这个文件夹下面,都是一些自己写的项目模块)
    -   index.js    (这个是项目打包入口)
5   index.html  (这个是我们的项目页面入口)
6  packge-lock.json(包锁文件)
7  packge.json(项目依赖的资源包与项目的描述信息的文件)
8  webpack.config.js(webpack的配置文件)

上面三个文件,这三个文件都不是真正需要上线(将项目放到服务器)的内容。于是我们需要webpack打包(抽取其中真真需要用的内容)

 

webpack基本操作

标签:信息   head   配置文件   web   ant   lang   下载   --   modules   

原文地址:https://www.cnblogs.com/boye-1990/p/10386786.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!