由浅入深 学习webpack(二)

大神勿喷 直接跳过?

用webpack 搭建 vue项目

1. 上一篇我们讲过 如和使用webpack 我们先建立一个项目

mkdir myWebpack
cd myWebpack
npm init -y

• 现在我们建立了一个项目 接下来 我们安装 项目所用的 包

npm install webpack webpack-dev-server vue-loader vue-template-compiler vue-style-loader postcss-loader css-loader style-loader file-loader url-loader html-webpack-plugin clean-webpack-plugin babel-loader @babel/core @babel/preset-env-D 

3. 在根目录创建 webpack.config.js (也可以放在其他目录， 一般放在根目录)
   

开整

• 目录结构
  

// webpack.config.jsconst path = require('path')const {
    CleanWebpackPlugin} = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')const VueLoaderPlugin = require('vue-loader/lib/plugin')module.exports = {
    // 模式mode: 'development', // 入口entry: './src/main.js',// 出口output: {
    filename: 'js/[name][chunkhash].js',path: path.resolve(__dirname, 'dist')},// loader module: {
    rules: [// VUE{
    test: /\.vue$/,loader: 'vue-loader'},{
    test: /\.js$/, // 正则校验 以js结尾 都要经过loader处理exclude: /(node_modules|bower_components)/, // 不要处理的文件use: {
     // 注册loaderloader: 'babel-loader',options: {
    presets: ['@babel/preset-env']}}},// CSS{
    test: /\.css$/,loader: 'style-loader!css-loader!postcss-loader',},{
    test: /\.less$/i,loader: 'style-loader!css-loader!less-loader'},// img{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,loader: 'url-loader',options: {
    limit: 10240}},{
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,loader: 'url-loader',options: {
    limit: 10000}},]},// 插件plugins: [// new webpack.ProgressPlugin(),new CleanWebpackPlugin(),new HtmlWebpackPlugin({
    title: 'vue',filename: 'index.html',template: 'src/plugin/index.html'}),new VueLoaderPlugin()],// 路经别名resolve: {
    alias: {
    'vue$': 'vue/dist/vue.esm.js'}},// 热更新 devServer: {
    contentBase: path.resolve(__dirname, 'dist'),compress: true,port: 9000,open: true}}

• demo项目地址 https://github.com/zbyecho/myWebpack.git