Open zhang14725804 opened 6 years ago
` "iview": "^3.0.0", "vue": "^2.5.16", "vue-router": "^2.8.1"
"webpack": "^2.2.1", "webpack-dev-server": "^2.4.1", "webpack-merge": "^3.0.0" `
` const path = require('path'); const webpack = require('webpack'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); function resolve (dir) { return path.join(dirname, dir) } module.exports = { entry: { main: './src/main', vendors: './src/vendors' }, output: { path: path.join(dirname, './dist') }, module: { rules: [ { test: /.vue$/, use: [ { loader: 'vue-loader', options: { loaders: { less: ExtractTextPlugin.extract({ use: ['css-loader?minimize', 'autoprefixer-loader', 'less-loader'], fallback: 'vue-style-loader' }), css: ExtractTextPlugin.extract({ use: ['css-loader', 'autoprefixer-loader', 'less-loader'], fallback: 'vue-style-loader' }) } } }, { loader: 'iview-loader', options: { prefix: false } } ] }, { test: /iview\/.?js$/, loader: 'babel-loader' }, { test: /.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /.css$/, use: ExtractTextPlugin.extract({ use: ['css-loader?minimize', 'autoprefixer-loader'], fallback: 'style-loader' }) }, { test: /.less/, use: ExtractTextPlugin.extract({ use: ['css-loader?minimize', 'autoprefixer-loader', 'less-loader'], fallback: 'style-loader' }) }, { test: /.(gif|jpg|png|woff|svg|eot|ttf)\??.$/, loader: 'url-loader?limit=1024' }, { test: /.(html|tpl)$/, loader: 'html-loader' } ] }, resolve: { extensions: ['.js', '.vue'], alias: { 'vue': 'vue/dist/vue.esm.js', 'libs':resolve('src/libs'), 'images':resolve('src/images'), 'views':resolve('src/views'), 'components':resolve('src/components'), } } };
`
` const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const merge = require('webpack-merge'); const webpackBaseConfig = require('./webpack.base.config.js'); const fs = require('fs');
fs.open('./src/config/env.js', 'w', function (err, fd) { const buf = 'export default "production";'; fs.write(fd, buf, 0, buf.length, 0, function (err, written, buffer){}); });
module.exports = merge(webpackBaseConfig, { output: { //publicPath: '/dist/', publicPath: './dist/', filename: '[name].[hash].js', chunkFilename: '[name].[hash].chunk.js' }, plugins: [ new ExtractTextPlugin({ filename: '[name].[hash].css', allChunks: true }), new webpack.optimize.CommonsChunkPlugin({ name: 'vendors', filename: 'vendors.[hash].js' }), new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }), new HtmlWebpackPlugin({ filename: '../index_prod.html', template: './src/template/index.ejs', inject: false }) ] }); `
问题：： （1）npm run build之后字体文件找不到（多了一层dist），编译后woff路径为./dist/dist/*.woff 当前解决方案：编译之后手动修改main.css中的字体路径 （2）删除dist路径之后，npm run dev，各种js\css\woff文件找不到，
` <!DOCTYPE html>
` 之前的项目，index.html没引入编译后的文件，只是给一个根元素就好了
1、各种版本
` "iview": "^3.0.0", "vue": "^2.5.16", "vue-router": "^2.8.1"
"webpack": "^2.2.1", "webpack-dev-server": "^2.4.1", "webpack-merge": "^3.0.0" `
2、base.config.js文件
` const path = require('path'); const webpack = require('webpack'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); function resolve (dir) { return path.join(dirname, dir) } module.exports = { entry: { main: './src/main', vendors: './src/vendors' }, output: { path: path.join(dirname, './dist') }, module: { rules: [ { test: /.vue$/, use: [ { loader: 'vue-loader', options: { loaders: { less: ExtractTextPlugin.extract({ use: ['css-loader?minimize', 'autoprefixer-loader', 'less-loader'], fallback: 'vue-style-loader' }), css: ExtractTextPlugin.extract({ use: ['css-loader', 'autoprefixer-loader', 'less-loader'], fallback: 'vue-style-loader' }) } } }, { loader: 'iview-loader', options: { prefix: false } } ] }, { test: /iview\/.?js$/, loader: 'babel-loader' }, { test: /.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /.css$/, use: ExtractTextPlugin.extract({ use: ['css-loader?minimize', 'autoprefixer-loader'], fallback: 'style-loader' }) }, { test: /.less/, use: ExtractTextPlugin.extract({ use: ['css-loader?minimize', 'autoprefixer-loader', 'less-loader'], fallback: 'style-loader' }) }, { test: /.(gif|jpg|png|woff|svg|eot|ttf)\??.$/, loader: 'url-loader?limit=1024' }, { test: /.(html|tpl)$/, loader: 'html-loader' } ] }, resolve: { extensions: ['.js', '.vue'], alias: { 'vue': 'vue/dist/vue.esm.js', 'libs':resolve('src/libs'), 'images':resolve('src/images'), 'views':resolve('src/views'), 'components':resolve('src/components'), } } };
`
3、prod.config.js
` const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const merge = require('webpack-merge'); const webpackBaseConfig = require('./webpack.base.config.js'); const fs = require('fs');
fs.open('./src/config/env.js', 'w', function (err, fd) { const buf = 'export default "production";'; fs.write(fd, buf, 0, buf.length, 0, function (err, written, buffer){}); });
module.exports = merge(webpackBaseConfig, { output: { //publicPath: '/dist/', publicPath: './dist/', filename: '[name].[hash].js', chunkFilename: '[name].[hash].chunk.js' }, plugins: [ new ExtractTextPlugin({ filename: '[name].[hash].css', allChunks: true }), new webpack.optimize.CommonsChunkPlugin({ name: 'vendors', filename: 'vendors.[hash].js' }), new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }), new HtmlWebpackPlugin({ filename: '../index_prod.html', template: './src/template/index.ejs', inject: false }) ] }); `
问题：： （1）npm run build之后字体文件找不到（多了一层dist），编译后woff路径为./dist/dist/*.woff 当前解决方案：编译之后手动修改main.css中的字体路径 （2）删除dist路径之后，npm run dev，各种js\css\woff文件找不到，
` <!DOCTYPE html>
` 之前的项目，index.html没引入编译后的文件，只是给一个根元素就好了