Webpack搭建ES6开发环境步骤
生活随笔
收集整理的這篇文章主要介紹了
Webpack搭建ES6开发环境步骤
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Webpack搭建ES6開發環境步驟
第一步 安裝模塊
1.創建package.json文件
手動配置
npm init
自動配置
npm init -y2.安裝webpack和webpack-cli
**cnpm install webpack webpack-cli --save-dev**3.安裝babel相關
安裝 babel和react相關加載器 cnpm i babel-loader @babel/core @babel/preset-env -D 安裝css加載器 cnpm i css-loader style-loader -D 安裝HTML插件 cnpm i html-webpack-plugin -D第二步 創建目錄結構
項目的目錄結構為：
myapp
? – public [靜態資源文件目錄]
? – src [ 項目源文件目錄 ]
? – dist [ 打包文件目錄 ]
? – webpack.config.js [ webpack配置文件 ]
? – package.json [ NPM包管理配置文件 ]
? – node_modules [ 項目中的依賴存放目錄 ]
在public目錄下，創建index.html，該文件為項目的默認首頁
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="UTF-8" /><title>Hello React Webpack</title></head><body><div id="root"></div></body> </html>在src目錄下，創建index.js，該文件為項目的入口文件，在此文件中可以編寫ES6代碼
[1,2,3,4,5].map(item=> console.log(item))在項目的根目錄下創建webpack.config.js配置文件，依次完成以下配置：
（1）配置入口（entry）
（2）配置出口（output）
const path = require('path'); module.exports = {// ...output: {path: path.resolve(__dirname, 'dist'),filename: 'main.js'} }（3）配置加載器（loader）
module.exports = {// ...module:{rules:[{test: /\.css$/,use:['style-loader','css-loader']},{test: /\.js?$/, // jsx/js文件的正則exclude: /node_modules/, // 排除 node_modules 文件夾use:{// loader 是 babelloader: 'babel-loader',options: {// babel 轉義的配置選項babelrc: false,presets: [[require.resolve('@babel/preset-env'), {modules: false}]],cacheDirectory: true}}}]} }（4）配置插件（plugin）
const HtmlWebPackPlugin = require('html-webpack-plugin'); module.exports = {// ...plugins:[new HtmlWebPackPlugin({template: 'public/index.html',filename: 'index.html',inject: true})] }執行打包命令
npx 隨npm安裝過了 npx webpack --mode development配置 npm run build 命令執行打包操作：
//在 package.json 文件添加 build 項 {"scripts": {"build": "webpack --mode production"} }執行打包命令：
npm run build第三步 搭建本地服務
安裝依賴
cnpm i webpack-dev-server -D在webpack.config.js文件中配置本地服務相關信息
module.exports = {// ...devServer: {contentBase: './dist',host: 'localhost',port: 3000} }在package.json文件中配置啟動命令
{"scripts": {"start": "webpack-dev-server --mode development --open"} }執行啟動服務命令 每操作一步，會自動打包
npm start如果配置不好把node_module文件夾刪掉
拷貝別人的package.json 和 webpack.config.js 文件
然后cnpm i 安裝所需要的包
總結
以上是生活随笔為你收集整理的Webpack搭建ES6开发环境步骤的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Win11开始菜单应用程序消失了怎么办?
- 下一篇： C3 小技巧