웹 패키지 프로젝트 구축(3)
23791 단어 웹 패키지 프로젝트 구축
npm install -D webpack-dev-server
const path = require('path')
//
const HtmlWebpackPlugin = require('html-webpack-plugin')
// loader
const VueLoaderPlugin = require('vue-loader/lib/plugin')
//
const webpack = require('webpack')
module.exports = {
//
mode: 'development',
//
entry: './src/main.js',
//
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
// loader
module: {
rules: [
// vue
{
test: /\.vue$/,
loader: 'vue-loader'
},
// {
// test: /\.(jpg|jpeg|png|svg)$/,
// loader: 'file-loader',
// options: { // , dist , hash ,
// name: '[name].[ext]', // :[name] ,[ext]
// // limit:2048 // 2048byte , base64 js , 2048byte , file-loader
// }
// },
//
{
test: /\.(jpg|jpeg|png|svg|gif)$/,
loader: 'url-loader',
options: {
name: '[name].[ext]',
limit: 2048
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'] // , , css , css-loader head style
},
{
test: /\.styl(us)?$/,
use: ['style-loader', 'css-loader', 'stylus-loader']
},
// vue style,
// {
// test: /\.styl(us)?$/,
// use: ['vue-style-loader', 'css-loader', 'stylus-loader']
// }
]
},
plugins: [
//
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html'
}),
//
new webpack.HotModuleReplacementPlugin()
],
//
// :webpack
/*
runtime only vue.common.js
compiler only compiler.js
runtime + compiler vue.js
*/
// vue.common.js, runtime + compiler vue.js ,
resolve: {
alias: {
'vue': 'vue/dist/vue.js'
}
},
// devServer
devServer: {
//
contentBase: './dist',
//
open: true,
port: 9000,
hot:true //
},
}
SourceMap
npm install -D webpack-merge
webpack.base.js
// node path
const path = require('path')
// vue-loader
const VueLoaderPlugin = require('vue-loader/lib/plugin')
// html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')
// clean-webpack-plugin
const {
CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
//
entry: './src/main.js',
//
plugins: [
// !
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new CleanWebpackPlugin()
],
//
output: {
filename: 'app.js',
path: path.resolve(__dirname,'../dist')
},
//
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.(jpg|jpeg|png|svg)$/,
loader: 'url-loader',
options: {
name: '[name].[ext]',
limit:2048
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.styl(us)?$/,
use: ['style-loader', 'css-loader', 'postcss-loader', 'stylus-loader']
}
]
},
resolve: {
alias: {
vue: 'vue/dist/vue.js',
'@': path.resolve(__dirname, '../src'), // , @ src
'styles':path.resolve(__dirname,'../src/assets/styles') // src , '~styles/aa.css'
}
}
}
webpack.dev.js
// webpack
const webpack = require('webpack')
const {
merge} = require('webpack-merge')
const baseConfig = require('./webpack.base.js')
const devConfig = {
//
mode: 'development',
devtool: 'cheap-module-eval-source-map',
devServer: {
//
contentBase: './dist',
//
open: true,
//
hot: true
},
//
plugins: [new webpack.HotModuleReplacementPlugin()]
}
module.exports = merge(baseConfig, devConfig)
webpack.prod.js
const {
merge} = require('webpack-merge')
const baseConfig = require('./webpack.base.js')
const prodConfig = {
//
mode: 'production'
}
module.exports = merge(baseConfig, prodConfig)
ES6 구문 분석
프로젝트에서, 때때로 우리는 ES6의 문법을 사용할 수 있지만, 이러한 내용은 저버전의 브라우저에서는 지원되지 않는다.종종 정상적으로 해석할 수 없다.
일반적으로, 우리는 Babel을 사용하여 ES6를 ES5의 문법으로 컴파일할 것이다.
Babel의 내용은 매우 풍부하다.우리는 단지 가장 기본적인 배치와 용법을 시범할 뿐이다
npm install -D babel-loader @babel/core
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}
npm install @babel/preset-env -D
파일을 만듭니다.babelrc 디렉터리
{
"presets": ["@babel/preset-env"] }