webpack命令

1、安裝nodeJs
2、安裝npm,升級用npm install -g npm,全局安裝
3、全局安裝webpack, npm instsall -g webpack
4、安裝依賴項,npm install --save-dev webpack

5、npm install webpack-cli -D

6、npm install @babel/preset-env
7、webpack app/main.js public/webpack.js

20180329
1、npm init
2、npm install --save-dev webpack
3、npm install --save lodash
4、npm install webpack-cli -D
5、npx webpack src/index.js --output dist/bundle.js
6、mode選項可以在webpack.config.js里指定,也可以在webpack cli命令上指定:

development:開發(fā)模式,webpack會默認配置常用于開發(fā)的參數(shù),如輸出運行時的錯誤信息等
production:產(chǎn)品模式,webpack會默認配置常用語產(chǎn)品構(gòu)建的餐宿,如壓縮代碼等

配置文件:
mode: 'development'
mode: 'production'

命令行:
webpack --mode development
webpack --mode production

去掉警告

7、增加webpack.config.js文件,添加入口出口文件
8、添加npx webpack --config webpack.config.js
9、添加
"scripts": {
"build": "webpack"
},

10、npm run build
11、從 JavaScript 模塊中 import 一個 CSS 文件,你需要在 module 配置中 安裝并添加 style-loader 和 css-loader:

npm install --save-dev style-loader css-loader

12、npm install --save-dev file-loader
13、處理背景和圖標這些圖片
14、每次清空/dist文件 clean-webpack-plugin
安裝 npm install clean-webpack-plugin --save-dev
15、source map module中添加:devtool: 'inline-source-map'
16、webpack-dev-server 為你提供了一個簡單的 web 服務(wù)器,并且能夠?qū)崟r重新加載
安裝 npm install --save-dev webpack-dev-server

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1 Webpack 1.1 概念簡介 1.1.1 WebPack是什么 1、一個打包工具 2、一個模塊加載工具 3...
    Kevin_Junbaozi閱讀 7,030評論 0 16
  • 版權(quán)聲明:本文為博主原創(chuàng)文章,未經(jīng)博主允許不得轉(zhuǎn)載。 webpack介紹和使用 一、webpack介紹 1、由來 ...
    it筱竹閱讀 11,468評論 0 21
  • webpack 介紹 webpack 是什么 為什么引入新的打包工具 webpack 核心思想 webpack 安...
    yxsGert閱讀 6,674評論 2 71
  • 目錄第1章 webpack簡介 11.1 webpack是什么? 11.2 官網(wǎng)地址 21.3 為什么使用 web...
    lemonzoey閱讀 1,831評論 0 1
  • “如果沒有你,日子怎么過,我的心也碎,我的事都不能做……”,今天上班,單位網(wǎng)絡(luò)出現(xiàn)故障,不能使用,忍不住好幾次把手...
    漢江書韻閱讀 1,027評論 0 0

友情鏈接更多精彩內(nèi)容